<!doctype html>
<html >
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>放大镜demo</title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
}
#small {
position: relative;
width: 440px;
height: 440px;
margin-left: 20px;
margin-top: 50px;
z-index: 1;
}
#small .img0 {
width: 440px;
height: 440px;
}
#mark {
width: 440px;
height: 440px;
position: absolute;
z-index: 20;
background: #fff;
left: 0px;
top: 0px;
filter: "alpha(opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
cursor: move;
}
#smallblock {
width: 160px;
height: 160px;
filter: alpha(opcity=50);
opacity: 0.5;
background-color: #ffd800;
font-size: 12px;
position: absolute;
left: 0px;
top: 0px;
cursor: move;
display: none;
z-index: 1;
}
#big {
position: absolute;
left: 480px;
top: 0px;
width: 440px;
height: 440px;
overflow: hidden;
display: none;
}
#big img {
width: 800px;
height: 800px;
position: absolute;
}
</style>
</head>
<body>
<div id="small">
<img src="http://img08.jiuxian.com/2015/0126/4da127b093eb456c9c814b94dc2cfd035.jpg" class="img0" id="small_img" />
<div id="smallblock"></div>
</div>
<div id="big">
<img src='http://img08.jiuxian.com/2015/0126/4da127b093eb456c9c814b94dc2cfd035.jpg' id="bigimg">
</div>
<div id="data"></div>
<script type="text/javascript">
function bigZoom(small, big, mblock) {
var evtx, evty, eleleftx, elelefty, bigwidth, bigheight;
small.onmouseover = function (evt) {
mblock.style.display = "block";
//console.log("eleleftx:" + eleleftx + "," + "elelefty:" + elelefty);
big.parentNode.style.display = "block";
// document.getElementById("data").innerHTML+=" mouseover,";
};
small.onmouseout = function () {
mblock.style.display = "none";
big.parentNode.style.display = "none";
// document.getElementById("data").innerHTML += " MOUSEOUT,";
};
small.onmousemove = function (evt) {
evt = getEvt(evt);
evtx = evt.clientX;
evty = evt.clientY;
eleleftx = small.offsetLeft;
elelefty = small.offsetTop;
mblock.style.left = evtx - eleleftx - (mblock.offsetWidth / 2) + "px";
mblock.style.top = evty - elelefty - (mblock.offsetHeight / 2) + "px";
if (mblock.offsetLeft <= 0) {
mblock.style.left = "0px";
}
if (mblock.offsetTop <= 0) {
mblock.style.top = "0px";
}
if (mblock.offsetLeft >= small.offsetWidth - (mblock.offsetWidth)) {
mblock.style.left = small.offsetWidth - (mblock.offsetWidth) + "px";
}
if (mblock.offsetTop >= small.offsetHeight - (mblock.offsetHeight)) {
mblock.style.top = small.offsetHeight - (mblock.offsetHeight) + "px";
}
bigwidth = big.offsetWidth; bigheight = big.offsetHeight;
big.style.left = "-" + (mblock.offsetLeft / (small.offsetWidth / bigwidth)) + "px";
big.style.top = "-" + (mblock.offsetTop / (small.offsetHeight / bigheight)) + "px";
};
function getEvt(evt) {
return evt || window.event;
}
}
//调用
var small = document.getElementById("small");
var big = document.getElementById("bigimg");
var block = document.getElementById("smallblock");
bigZoom(small, big, block);
</script>
</body>
</html>
另外附上个人改版的jquery版
<html>
<head>
<title>test</title>
<script src="jquery-1.11.1.min.js"></script>
<style>
body{
padding:0px;
margin:0px;
}
#small{
width:440px;
height:440px;
overflow:hidden;
position:relative;
z-index:1;
}
#small img{
width:100%;
height:100%;
}
#smallblock{
width:160px;
height:160px;
filter: alpha(opcity=50);
opacity: 0.5;
background-color: #ffd800;
position:absolute;
left:0;
top:0;
display:none;
}
#big{
width:440px;
height:440px;
overflow:hidden;
position:absolute;
left:480px;
top:0;
display:none;
}
#big img{
width:1210px;
height:1210px;
position:absolute;
}
</style>
</head>
<body>
<div id="small">
<img src="http://img08.jiuxian.com/2015/0126/4da127b093eb456c9c814b94dc2cfd035.jpg" class="img0"></img>
<div id="smallblock"></div>
</div>
<div id="big">
<img src="http://img08.jiuxian.com/2015/0126/4da127b093eb456c9c814b94dc2cfd035.jpg" ></img>
</div>
<script>
$("#small").mouseover(function(){
$("#smallblock").show();
$("#big").show();
}).mouseout(function(){
$("#smallblock").hide();
$("#big").hide();
}).mousemove(function(e){
var x = e.clientX - $("#small").offset().left - $("#smallblock").outerWidth()/2;
var y = e.clientY - $("#small").offset().top - $("#smallblock").outerHeight()/2;
if(x < 0)
{
x = 0;
}
if(y < 0)
{
y = 0;
}
if(x > $("#small").outerWidth() - $("#smallblock").outerWidth())
{
x = $("#small").outerWidth() - $("#smallblock").outerWidth();
}
if(y > $("#small").outerHeight() - $("#smallblock").outerHeight())
{
y = $("#small").outerHeight() - $("#smallblock").outerHeight();
}
$("#smallblock").css("left", x + "px");
$("#smallblock").css("top", y + "px");
var bx = $("#smallblock").offset().left*$("#big img").outerWidth()/$("#small").outerWidth();
var by = $("#smallblock").offset().top*$("#big img").outerHeight()/$("#small").outerHeight();
$("#big img").css("left", "-" + bx + "px");
$("#big img").css("top","-"+ by + "px");
})
</script>
</body>
</html>
![准确理解CSS clear:left/right的含义及实际用途[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)