原生JS实现图片的放大镜效果

最新推荐文章于 2024-07-10 10:06:23 发布

ta_men

最新推荐文章于 2024-07-10 10:06:23 发布

阅读量1.4k

点赞数

分类专栏： Javascript Study Record 文章标签：原生js 图片放大动画

本文链接：https://blog.csdn.net/ta_men/article/details/62426199

版权

Javascript Study Record 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

实现效果 : 将鼠标移动至图片时,在图片一侧显示鼠标周围位置对应的大图.大图随着鼠标的移动相应改变,鼠标移出时大图消失.

思路 :

1.将浏览的图片,放大后的图片,及鼠标周围的方块布局完成;
2.获取事件对象中的鼠标位置(left,top),通过简单的计算,得到鼠标周围方块的时时位置;
3.根据方块与图片的比例和大图所在块的尺寸与大图的比例,计算得到大图的时时位置;
4.添加鼠标移入移出事件.

值得注意的是 : 当触发onmousemove事件时,浏览器会判断鼠标与事件源之间是否存在子元素,若存在将会吧子元素作为事件源,因此导致方块乱跳现象.处理办法为 : 在图片块中加入一个带有定位属性,尺寸与图片块相同的块,将透明度设为0,这样就隔绝了鼠标下的方块,其实相当于事件源也发生了改变.

完整代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{                              /*全局重置*/
                padding: 0;
                margin: 0;
            }
            #box{
                position: relative;         /*这里也可以使用绝对属性*/
                width: 400px;
                height: 300px;
                margin: 110px;
                background: url(/JS练习/DOM/pics/2.jpg);
                cursor: crosshair;          /*改变鼠标样式*/
            }
            #sbox{
                position: absolute;
                left: 0;
                top: 0;
                width: 200px;
                height: 150px;
                background: thistle;
                opacity: 0.55;              /*设置透明度,符合w3c规范*/
                filter: alpha(opacity=55);  /*低版本IE标准*/
                display: none;              /*设置不可见*/
            }
            #big{
                position: absolute;
                left: 550px;
                top: 100px;
                display: none;
                width: 400px;
                height: 300px;
                border: 1px darkgray solid;
                overflow: hidden;           /*图片溢出隐藏*/
            }
            #rpic{
                position: absolute;
                left: 0;
                top: 0;
            }
            #cover{
                position: absolute;
                left: 0;
                top: 0;
                width: 400px;
                height: 300px;
                background: black;
                opacity: 0;
                filter: alpha(opacity=0);
            }
        </style>
<script type="text/javascript">
    window.onload=function(){                       //加载页面
        var box = document.getElementById("box");   //抓取元素
        var rpic = document.getElementById("rpic");
        var sbox = document.getElementById("sbox");
        var cover = document.getElementById("cover");
        cover.onmousemove=function(e){              //绑定鼠标移动时间
            var ev = window.event || e ;            //事件对象的兼容性写法
            var evx = ev.offsetX ||ev.layerX;       //获得鼠标离相对最近定位属性的左边距
            var evy = ev.offsetY ||ev.layerY;       //获得上边距
            document.title=evx +'|'+evy;            //在title中显示
            var box_x = evx-100;                    //计算小方块的边距
            var box_y = evy-75;
            if (box_x<0) {                          //赋值前判断方块是否出界并处理
                box_x=0;
            }
            if (box_x>200) {
                box_x=200;
            }
            if (box_y<0) {
                box_y=0;
            }
            if (box_y>150) {
                box_y=150;
            }
            big.style.display='block';              //改变属性,使鼠标移入时图片显示
            sbox.style.display='block';
            sbox.style.left=box_x+'px';             //赋值新位置
            sbox.style.top=box_y+'px';
            var rpic_x=-2*box_x;                    //得到大图的时时定位数据
            var rpic_y=-2*box_y;
            rpic.style.left=rpic_x+'px';
            rpic.style.top=rpic_y+'px';

        }
        box.onmouseout=function(){                  //绑定移出事件
            big.style.display='none';
            sbox.style.display='none';
        }
    }
</script>
    </head>
    <body>
        <div id="box">                              <!--图片的div-->
            <div id="sbox"></div>                   <!--方块的div-->
            <div id="cover"></div>                  <!--透明层的div-->
        </div>
        <div id="big" >                             <!--放置大图的div-->
            <img src="/JS练习/DOM/pics/2b.jpg" id='rpic' />  <!--加入图片-->
        </div>
    </body>
</html>