js实现简单放大镜效果 js实现简单放大镜效果

用js实现简单放大镜效果，供大家参考，具体内容如下
此处放大镜实现的效果就是当鼠标放置在图片上会有半透明遮罩，图片的一个区域就会被放大，然后展示在右边。当鼠标移动时右边的大图片也会局部移动。这里的放大并不是真正的放大，而是等比例移动。下面是实现的代码：
css样式代码如下：

.s_box{width:400px; height: 300px; position: absolute; left: 50px; top:100px; } .s_box img{width: 400px; height: 300px; } .s_box span{width: 130px; height: 100px; background: rgba(200,200,200,0.5); position: absolute; left:0; top:0; display: none; cursor:move; } .b_box{width: 400px; height: 300px; overflow: hidden; position: absolute; left:500px; top:100px; display: none; } .b_box img{width: 1200px; height: 900px; position: absolute; left:0; top:0; } .list{margin: 0; padding: 0; list-style: none; position: absolute; left:50px; top:430px; } .list li{float: left; margin: 0 10px; } .list li img{width: 100px; height: 80px; }

html代码如下：