放大镜是小图预览鼠标指针为什么不是中间，反而有点偏右下角？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>放大镜</title>
<script src="http://libs.baidu.com/jquery/1.10.0/jquery.min.js"></script>
<script>
$(function(){
$(document).on("mouseover","#mark",function(){
$("#float-box").show();
$("#big-box").show();
});
$(document).on("mouseout","#mark",function(){
$("#float-box").hide();
$("#big-box").hide();
});
$(document).on("mousemove","#mark",function(ev){
var left = ev.pageX - $("#demo").offset().left - $("#small-box").offset().left - $("#float-box").width()/2,
top = ev.pageY - $("#demo").offset().top - $("#small-box").offset().top - $("#float-box").height()/2;
if(left < 0){
left = 0;
}else if(left > ($("#mark").width() - $("#float-box").width())){
left = $("#mark").width() - $("#float-box").width();
}
if(top < 0){
top = 0;
}else if(top > ($("#mark").height() - $("#float-box").height())){
top = $("#mark").height() - $("#float-box").height();
}
$("#float-box").css({"left":left+"px","top":top+"px"});
var percentX = left / ($("#mark").width() - $("#float-box").width()),
percentY = top / ($("#mark").height() - $("float-box").height());
$("#big-box img").eq(0).css({"left": -percentX*($("#big-box img").eq(0).width() - $("#big-box").width())+"px","top": -percentY*($("#big-box img").eq(0).height() - $("#big-box").height())+"px"});
});
})
</script>
<style type="text/css">
* {
margin: 0;
padding: 0
}
#demo {
display: block;
width: 400px;
height: 255px;
margin: 50px;
position: relative;
border: 1px solid #ccc;
}
#small-box {
position: relative;
z-index: 1;
}
#float-box {
display: none;
width: 160px;
height: 120px;
position: absolute;
background: #ffffcc;
border: 1px solid #ccc;
filter: alpha(opacity=50);
opacity: 0.5;
cursor: move;
}
#mark {
position: absolute;
display: block;
width: 400px;
height: 255px;
z-index: 10;
background: #fff;
filter: alpha(opacity=0);
opacity: 0;
cursor: move;
}
#big-box {
display: none;
position: absolute;
top: 0;
left: 460px;
width: 400px;
height: 300px;
overflow: hidden;
border: 1px solid #ccc;
z-index: 1;;
}
#big-box img {
position: absolute;
z-index: 5
}
</style>
</head>
<body>
<div id="demo">
<div id="small-box">
<div id="mark"></div>
<div id="float-box"></div>
<img src="http://img.mukewang.com/537d77fb0001559d04000255.jpg"/>
</div>
<div id="big-box">
<img src="http://img.mukewang.com/537d781b0001c04210240654.jpg"/>
</div>
</div>
</body>
</html>
o缘来是你o1回答
随时随地看视频慕课网APP
相关分类
JQuery