Jquery版放大镜效果

最新推荐文章于 2024-09-14 18:52:56 发布

dcw43465

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量105

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/sj1988/p/6759154.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>放大镜</title>
    <style>
        *{margin:0;padding:0;list-style: none}
        #div1{width:200px;height:200px;position:absolute;left:100px;border:1px solid #000;top:100px;border:1px solid #000;}
        #span1{width:80px;height:80px;background:green;position:absolute;left:0;top:0;z-index:2;opacity:0.4;filter:alpha(opacity:40);cursor: all-scroll;display:none;}
        #div1 img{width:200px;height:200px;}
        #div2{width:400px;height:400px;overflow: hidden;position:absolute;left:302px;top:100px;border:1px solid #000;display:none;}
        #div2 img{width:600px;hgeight:600px;position:absolute;}
    </style>
    <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
    <div id="div1">
        <span id="span1"></span>
        <img src="http://img5.imgtn.bdimg.com/it/u=96369774,1200533339&fm=206&gp=0.jpg" alt="">
    </div>
    <div id="div2">
        <img src="http://img5.imgtn.bdimg.com/it/u=96369774,1200533339&fm=206&gp=0.jpg" alt="" id="img1">
    </div>
</body>
<script>
    $(function(){
        var oDiv1=$('#div1');
        var oDiv2=$('#div2');
        var oSpan=$('#span1');
        var oImg=$('#img1');
        oDiv1.mouseover(function(){
            oSpan.css({display:'block'});
            oDiv2.css({display:'block'});
        });
        oDiv1.mouseout(function(){
            oSpan.css({display:'none'});
            oDiv2.css({display:'none'});
        });
        oDiv1.mousemove(function(ev){
            var l=ev.clientX-oDiv1.offset().left-oSpan.outerWidth()/2;
            var t=ev.clientY-oDiv1.offset().top-oSpan.outerHeight()/2;
            if(l<0)l=0;
            if(t<0)t=0;
            if(l>oDiv1.outerWidth()-oSpan.outerWidth())l=oDiv1.outerWidth()-oSpan.outerWidth();
            if(t>oDiv1.outerHeight()-oSpan.outerHeight())t=oDiv1.outerHeight()-oSpan.outerHeight();
            oSpan.css({
                left:l,
                top:t
            });
            var scaleX=l/(oDiv1.outerWidth()-oSpan.outerWidth());
            var scaleY=t/(oDiv1.outerHeight()-oSpan.outerHeight());
            var kL=oImg.outerWidth()-oDiv2.outerWidth();
            var kT=oImg.outerHeight()-oDiv2.outerHeight();

            oImg.css({
                left:-kL*scaleX,
                top:-kT*scaleY
            })
        })
    })
</script>
</html>