需求:商品展示图片的放大效果,
运用技术:onmousemove,event事件,event.clientX,event.clientY,简单的实现商品放大效果,
tips:可以下载源码直接放到编辑器里面看效果,请注意需要往class为img的img标签里添加图片地址,这样就可以实现一个简单的放大镜效果了,
源码如下:
.box{
width:800px;
height:600px;
border:1px solid #000;
position:relative;
float:left;
margin:0 50px;
}
img{
width:800px;
height:600px;
}
.box div{
width:200px;
height:200px;
background-color: rgba(225,225,225,.5);
position:absolute;
left:0;
right:0;
display: none;
overflow: hidden;
border-radius: 100px;
box-shadow: 0px 0px 5px #000;
border:1px solid #000;
cursor: pointer;
}
.showBox{
width:400px;
height:400px;
border:1px solid #000;
float: left;
margin-top:150px;
position: relative;
overflow: hidden;
border-radius: 200px;
}//代码效果参考:http://www.ezhiqi.com/zx/art_598.html
.move{
position:absolute;
left:0;
top:0;
}
.foloow{
position:absolute;
top:0;
left:0;
}