原声JS放大镜

最新推荐文章于 2017-06-21 09:35:48 发布

lusizhifei

最新推荐文章于 2017-06-21 09:35:48 发布

阅读量285

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/lusizhifei/article/details/59558825

版权

js 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>放大镜</title>
<style>
*{margin: 0;padding: 0;}
#box{width: 400px;height: 400px;border: 1px solid #ccc;position: relative;left: 50px;top: 50px;}
#cover{width: 400px;height: 400px;position:absolute;left: 0;top:0;background:#000;opacity: 0.2;display: none;}
#len{width: 90px;height: 90px;position: absolute;left: 0;top: 0;background:url(img/400_1.jpg);}
#big{width: 400px;height: 400px;border: 1px solid #ccc;position: absolute;left: 520px;top:50px;overflow: hidden;}
#big img{position: absolute;}
</style>
</head>
<body>
<div id="box">
<img src="img/400_1.jpg" />
<div id="cover"></div>
<div id="len"></div>
</div>
<div id="big">
<img src="img/800_1.jpg" id="zoo"/>
</div>
</body>
<script type="text/javascript" src="js/tools.js"></script>
<script type="text/javascript">
var lenWidth=$("#len").offsetWidth,
lenHeight=$("#len").offsetHeight,
boxWidth=$("#box").offsetWidth,
boxHeight=$("#box").offsetHeight;

$("#box").οnmοusemοve=function(e){
e=e||event;

offset($("#len"), {
top:e.pageY - lenHeight / 2,
left:e.pageX - lenWidth / 2
});
var _top = $("#len").offsetTop,
_left = $("#len").offsetLeft,
rateX=boxWidth/lenWidth,
rateY=boxHeight/lenHeight;
if(_left<0)
_left=0;

else if(_left>boxWidth-lenWidth)
_left=boxWidth-lenWidth
if(_top<0)
_top=0;
else if(_top>boxHeight-lenHeight)
_top=boxHeight-lenHeight

css($('#len'),{
top:_top+"px",
left:_left+"px"
})

css($("#len"), "backgroundPosition", -_left + "px "+ -_top +"px");
console.log(-_left + "px "+ -_top +"px")
$("#zoo").style.left=-_left*rateX+"px";
$("#zoo").style.top=-_top*rateY+"px";
$("#zoo").style.width=rateX*boxWidth+"px";
$("#zoo").style.height=rateY*boxHeight+"px";

}

$("#box").οnmοuseenter=function(){
$("#len").style.display="block";
$("#big").style.display="block";
$("#cover").style.display="block";

}
$("#box").οnmοuseleave=function(){
$("#len").style.display="none";
$("#big").style.display="none";
$("#cover").style.display="none";
}

</script>
</html>

lusizhifei

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原声JS放大镜

放大镜*{margin: 0;padding: 0;}#box{width: 400px;height: 400px;border: 1px solid #ccc;position: relative;left: 50px;top: 50px;}#cover{width: 400px;height: 400px;position:absolute;left: 0;top:0;bac
复制链接

扫一扫