首页 > 代码库 > jQery放大镜效果

jQery放大镜效果

简单2:1的放大

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>放大镜效果</title>
        <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        img{
            display: block;
        }
            #pic{
                width: 200px;
                height: 160px;
                border: 3px solid #ccc;
                position: relative;
                float: left;
            }
            #pic img{
                width: 200px;
                height: 160px;
            }
            .mirror{
                width: 100px;
                height: 80px;
                background: gold;
                opacity: .5;
                position: absolute;
                left: 0;
                top: 0;
                display: none;
            }
            #bigbox{
                width: 200px;
                height: 160px;
                float: left;
                border: 3px solid #ccc;
                overflow: hidden;
                position: relative;
            }
            #bigbox img{
                position: absolute;
            }
        </style>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                    $(‘#pic‘).on({
                        mousemove:function(e){
                            $(‘.mirror‘).css(‘display‘,‘block‘)
                            //获取当前鼠标按下的位置相对于box的偏移值
                            var _left = e.clientX - $(‘#pic‘).offset().left - $(‘.mirror‘).width()/2;
                            var _top = e.clientY - $(‘#pic‘).offset().top - $(‘.mirror‘).height()/2;
                            //判断不能超出边界
                            if(_left<0){
                                _left = 0
                            }
                            if(_left>=$(‘#pic‘).width() - $(‘.mirror‘).width()){
                                _left=$(‘#pic‘).width() - $(‘.mirror‘).width()
                            }
                            if(_top<0){
                                _top = 0
                            }
                            if(_top>=$(‘#pic‘).height() - $(‘.mirror‘).height()){
                                _top = $(‘#pic‘).height() - $(‘.mirror‘).height()
                            }
                            //在box中移动鼠标,改变放大镜的位置
                            ($(‘.mirror‘)).css({‘left‘:_left,‘top‘:_top})
                            //根据放大镜的位置,算出右侧大图应该显示的部分
                            $(‘#img1‘).css({‘left‘:-$(‘.mirror‘).position().left * 2,‘top‘:-$(‘.mirror‘).position().top * 2})
                        },
                        //鼠标移出后,放大镜隐藏
                        mouseleave:function(){
                            $(‘.mirror‘).css(‘display‘,‘none‘)
                            
                        }
                    })    
            })
        </script>
    </head>
    <body>
        <div id="box">
            <div id="pic">
                <img src="http://www.mamicode.com/img/6.jpg"/>
                <p class="mirror"></p>
            </div>
            <div id="bigbox">
                <img id="img1" src="http://www.mamicode.com/img/6.jpg"/>
            </div>
        </div>
    </body>
</html>

 

jQery放大镜效果