js放大镜效果

<script type="text/javascript">
window.onload = function(){
var Wrap = document.getElementById("wrap")
var img = document.getElementById("img")
var Wrap1 = document.getElementById("warp1")
//抓粉色的框
var Bor = document.getElementById("border")
//
var meng = document.getElementById("meng")

meng.onmousemove = function(e){
// 做兼容获取事件对象
var e = e || window.event;
//获取鼠标位置
var left = e.offsetX || e.layerX
var top = e.offsetY || e.layerY;
//判断红框的的宽度
if(left<=100){
left=100;
}
if(left>=300){
left=300;
}
if(top<=100){
top=100;
}
if(top>=300){
top=300;
}

//获取到那个红色块的位置-100的意思让鼠标到红色框的中间top和left各减一百
Bor.style.left = left-100+'px';
Bor.style.top = top-100+'px';
//把
img.style.left = -2*left+200+'px';
img.style.top = -2*top+200+'px';



}

}

</script>

//

<div id="wrap">
<img src="img/400.jpg" />
<div id="border">

</div>
<div id="meng">

</div>
</div>
<div id="warp1">
<img style="position: absolute;" src="img/800.jpg" id="img"/>
</div>

/css///

<style type="text/css">
*{
margin: 0;
padding: 0px;
}
#wrap{
width: 400px;
height: 400px;
position: relative;
border: 1px solid;
}
#warp1{
width: 400px;
height: 400px;
position: absolute;
border: 1px solid blue;
left: 450px;
top: 0px;
overflow: hidden;
}
#border{
width: 200px;
height: 200px;
background: pink;
position: absolute;
top: 0px;
left: 0px;
opacity: 0.5;
}
#meng{
width: 400px;
height: 400px;
position: absolute;
top: 0px;
left: 0px;
z-index: 9;
background: black;
opacity: 0.1;
}
</style>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值