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

来源：互联网发布：win7系统优化编辑：程序博客网时间：2024/05/28 15:08

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

思路 :

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>

以上内容学习参考了后盾网孙琪峥老师的公共教学资源,侵权删.

欢迎指导交流.

0 0