练习-放大镜效果 

<!DOCTYPE html>
<html lang="en">
<!-- 这个放大镜效果只是固定图像到左上角，一旦图片更换位置就必须修改代码 -->
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../jquery1.8.3/jquery.min.js">
    </script>
    <style>
        * {margin: 0; padding: 0; }
        #min {width: 350px; border: 1px solid skyblue;}
         #max {width: 350px; height: 350px; position: absolute; overflow: hidden; display: none;}
         #inner {width: 100px; height: 100px; position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, .4); display: none;}
    </style>
</head>

<body>

    <img src="images/loupe.jpg" id="min" alt="">
    <div id="max"> <img src="images/loupe.jpg" alt=""></div>
    <div id="inner"></div>

    <script>
        $(document).mouseover(function() {
            var p = $('#min').offset();
            var w = $('#min').width();
            $('#max').css({
                top: p.top,
                left: p.left + w + 5
            }).show();

        }).mousemove(function(e) {
            $('#inner').css({
                // 在移动的同时检测边界
                top: pointY(e.pageY - 50),
                left: pointX(e.pageX - 50)
            }).mousemove(function(e) {

                $('#max').scrollTop((e.pageY-$('#min').offset().top) * 10 -175)
                         .scrollLeft((e.pageX-$('#min').offset().left) * 10 - 175);

            }).show();

            //判断鼠标是否越界，越过即隐藏遮罩层和右侧大图
            if(e.pageY>247 || e.pageY<=5 || e.pageX>350 ){
                $('#max').hide();
                $('#inner').hide();
            }
        });

        /*
            处理边界
            因为鼠标的移动是一种综合移动，同时包含了x轴和y轴的两个方向的值，
            那么把X轴和Y轴都分成两个部分来计算。各半部分控制一边的边界。
　　　　　　 --这里我用到了之前练习时候的小人移动的知识来解决这个边界问题。事实上也是不完美的，没有解决在任何位置的边界问题，
　　　　　　　　也就是说，如果这个图片移动位置了，图片改变大小了，要重写。这个说法应该叫封装吧，下次找机会修改一下。
        */
        function pointY(point){
            return point>70?Math.min(point,147):Math.max(point,1);
        }
        function pointX(point){
            return point>125?Math.min(point,250):Math.max(point,1);
        }
    </script>
</body>

</html>

在线地址：http://www.yupinghua.com/practices/components/loupe.html

posted @ 2017-02-09 01:08  喻平华  阅读(188)  评论(0)    收藏  举报