jquery-放大镜通用

图片自己替换
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .smallImg1,.smallImg2,.smallImg3{position:relative;left:50px;top:50px;width: 240px;height: 240px;border:1px solid;float: left;margin-left:10px;}
        .smallImg1 img,.smallImg2 img,.smallImg3 img{width: 100%;height:100%;}
        .control1,.control2,.control3{position:absolute;left:0;top:0;width:100px;height:100px;display:none;background: #ccc;opacity: 0.5;filter: alpha(opacity:50);}
        .bigImg1,.bigImg2,.bigImg3{position:absolute;width:300px;height:300px;left:300px;top:340px;overflow: hidden;}
        .big1,.big2,.big3{position: absolute;left: 0;top: 0;display: none;}
    </style>
    <script type="text/javascript" src="libs/jquery-1.11.3.js"></script>
    <script type="text/javascript">
        $(function(){
            /**
             *
             * @param smallNode
             * @param controlNode
             * @param bigNode
             */
            function fd(smallNode,controlNode,bigNode){
                var scale = 3;
                smallNode.mousemove(function(ev){
                    ev = ev || event;
                    var x = ev.clientX - smallNode.offset().left - controlNode.width()/2;
                    var y = ev.clientY - smallNode.offset().top - controlNode.height()/2;
                    if(x < 0){
                        x = 0;
                    }
                    if(y < 0){
                        y = 0;
                    }
                    if(x > smallNode.width() - controlNode.width()){
                        x = smallNode.width() - controlNode.width();
                    }
                    if(y > smallNode.height() - controlNode.height()){
                        y = smallNode.height() - controlNode.height();
                    }
                    controlNode.css('left',x + 'px');
                    controlNode.css('top',y + 'px');

                    bigNode.css('left',x * (-scale) + 'px');
                    bigNode.css('top',y * (-scale) + 'px');

                });
                smallNode.mouseenter(function(){
                    controlNode.css('display','block');
                    bigNode.css('display','block');
                    //小图的宽高
                    var imgWidth = smallNode.width();
                    var imgHeight = smallNode.height();
                    //control的宽高
                    controlNode.width(imgWidth / scale);
                    controlNode.height(imgHeight / scale);
                    //大图的宽高
                    bigNode.width(imgWidth * scale);
                    bigNode.height(imgHeight * scale);
                });
                smallNode.mouseleave(function(){
                    controlNode.css('display','none');
                    bigNode.css('display','none');
                });
            }
            fd($('.smallImg1'),$('.control1'),$('.big1'));
            fd($('.smallImg2'),$('.control2'),$('.big2'));
            fd($('.smallImg3'),$('.control3'),$('.big3'));

        })
    </script>
</head>
<body>
<div class="smallImg1" id="smallDiv">
    <img src="images/girl.jpg"/>
    <div class="control1" id="controlDiv"></div>
</div>
<div class="smallImg2">
    <img src="images/psb.jpg"/>
    <div class="control2"></div>
</div>
<div class="smallImg3">
    <img src="images/psb1.jpg"/>
    <div class="control3"></div>
</div>
<div class="bigImg1" id="bigDiv">
    <img class="big1" src="images/girl.jpg" />
</div>
<div class="bigImg2">
    <img class="big2" src="images/psb.jpg" />
</div>
<div class="bigImg3">
    <img class="big3" src="images/psb1.jpg" />
</div>
</body>
</html>
猜你喜欢
