2018-02-23

jquery实现透视镜

jquery实现透视镜--揭示隐藏在屏幕后的真相吧

效果展示

实现代码

<!-- 
    实现效果:图片默认隐藏 移动鼠标，在鼠标位置附近显示隐藏的内容
 -->
<html>
    <head>
        <meta name="UTF-8">
        <style>
            *{
                padding: 0px;
                margin: 0px;
            }
            .monitor{
                margin-left: 100px;
                height: 200px;
                width: 200px;
                border-radius: 50%;
                overflow: hidden;
            }
            .monitor>img{
               position: relative;
               left: 0px;
               top: 0px;
            }
        </style>
    </head>
     <!--为body添加鼠标移动事件，并传入活动对象  -->
    <body onmousemove="e(event)">
        <div class="monitor">
            <img src="1.png">
        </div>
    </body>
    <script type="text/javascript" >
       var monitor = document.getElementsByClassName("monitor");
       var img = document.getElementsByTagName("img");
       function e(e){//接受传入的对象
        //获取鼠标位置
            var x = e.clientX;
            var y = e.clientY+ document.documentElement.scrollTop;
           //图片相对当前定位 要求图片始终固定在原点位置
            img[0].style.left=-x;
            img[0].style.top=-y;
           //透视镜跟随鼠标移动
            monitor[0].style.marginLeft = x-100;
            monitor[0].style.marginTop = y-100;
       };
    </script>
</html>