用js实现简单放大镜效果

用js实现简单放大镜效果

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

 <style>
        .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