放大镜

放大镜

HTML代码

 

<div class="details-left fl">
            <div class="pics-box">
                <div class="small_box">
                    <span class="mask"></span>
                    <span class="float_layer"></span>
                    <img src="img/pro/7_418x418.jpg">
                </div>
                <div class="big_box">
                    <img src="img/pro/7_800x800.jpg">
                </div>
            </div>
            <div class="like">
                <span class="like-icon"></span>
                <i class="like-num">0</i>
            </div>
            <div class="pic-slide">
                <img src="img/details-i.png"/>
            </div>
        </div>

 

css代码

/*放大镜功能样式*/
.pics-box{position:relative;}
.small_box{width:400px;height:400px;border:1px solid #ddd;}
.small_box img{width: 100%;}
.small_box .mask{position:absolute;width:100%;height:100%;background:rgba(0,0,0,0.5);opacity:0;z-index:2;cursor:move;}
.small_box .float_layer{position:absolute;width:200px;height:200px;background:rgba(0,0,0,0.5);display:none;}
.big_box{position:absolute;left:400px;top:0;width:400px;height:400px;overflow:hidden;display:none; border:1px solid #ddd;}
.big_box img{position:absolute;}

jQuery代码

<script type="text/javascript">
        // 放大镜
        $(".mask").hover(function(){//当鼠标悬挂上时显示
            $(".float_layer").show()
            $(".big_box").show();
        },function(){//否则隐藏
            $(".float_layer").hide()
            $(".big_box").hide()
        }).mousemove(function(e){//显示鼠标的位置（通过XY轴进行计算）
            var x=e.offsetX-100;//左
            var y=e.offsetY-100;//上
            var w=$(this).width();//右
            var h=$(this).height();//下
            if(y<0)
                y=0;
            if(x<0)//
                x=0;
            if(e.offsetX+100>=w){
                x=w-200;
            }
            if(e.offsetY+100>=h){
                y=h-200;
            }
            $(".float_layer").css({
                left:x+"px",
                top:y+"px"
            })
            $(".big_box img").css({
                left:-2*x+"px",
                top:-2*y+"px"
            })
            // screenx|y整个页面
            // offset  
            
        })
    })
        
    </script>