javascript放大镜

最新推荐文章于 2023-06-15 17:34:06 发布

阳哥爱吃饭

最新推荐文章于 2023-06-15 17:34:06 发布

阅读量279

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/zyp22343234/article/details/74277897

版权

javascript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

简单说一下思路：需要两张一样的图片，一张图片设置放大后的样式，就是放大后的图片，大图设置绝对定位，小图的移动框设置绝对定位，
先设置大图隐藏，移入小图后显示，然后获取小图的移动框位置，然后比上小图的宽，得到一个比值，然后这个比值乘以大图的移动的宽高，这就是大图的移动坐标

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>

              /*这里需要注意的是移动框和小图片的宽高比等于小图和大图的宽高比（宽高最好设置一样的）*/
            /*这是小图片的盒子*/
            #box{
                width: 300px;
                height:300px;
                border: 1px solid #ccc;
               float: left;
               position: relative;
            }
            /*这是小图片*/
            #box img{
                display: inline-block;
                width: 300px;
                height:300px;
            }
            /*这是大图片的盒子*/
            #son{

              width:300px;
              height: 300px;
                border:1px solid red;
                float: left;
                overflow: hidden;
            position: relative;
            display: none;
            }
            /*大图片*/
            #son img{
            position: absolute;
                width: 600px;
                height:600px;
            }
        /*  这是小图片里面 的移动框*/
            #kuang{
                width: 150px;
                height: 150px;
                border: 1px solid red;
                position: absolute;
                top: 0;
                left: 0;
                display: none;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <img src="../img/1.jpeg"/>
            <div id="kuang">

            </div>
        </div>
        <div id="son">
            <img src="../img/1.jpeg" id="simg"/>
        </div>
    </body>
    <script type="text/javascript">
//     这里设置个获取id的函数
        function id(id){
            return document.getElementById(id);
        }
        var oBox=id('box');//获取小图盒子
        var oSon=id('son');//获取大图盒子
        var oKa=id('kuang');//获取移动框
        var oImg=id('simg');//获取大图
    oBox.onmouseenter=function(ev){//   鼠标移入事件
            var ev=ev||window.event;//设置当前事件
                oSon.style.display='block';
              oKa.style.display='block';
        var Bw1=oBox.offsetWidth;// 获取小图盒子的宽度
            var Bh1=oBox.offsetHeight;//获取小图盒子的高度
            var Mw2=oImg.offsetWidth;// 获取大图的宽度
            var Mh2=oImg.offsetHeight;//获取大图的高度


            oBox.onmousemove=function(ev){//鼠标移动事件
                      ev=ev||window.event;//设置当前事件
                         //获取鼠标位置减去移动框的宽的一半让鼠标始终在移动框的中间
                 var x=ev.clientX-oKa.offsetWidth/2;  
                 //获取鼠标位置减去移动框的高的一半让鼠标始终在移动框的中间
                     var y=ev.clientY-oKa.offsetWidth/2;
//                   设置移动范围让移动框不能移出小图盒子
                     if(x<0){//不能移出左边
                        x=0;
                     }
                     else if(x>oBox.offsetWidth-oKa.offsetWidth){//不能移出右边
                        x=oBox.offsetWidth-oKa.offsetWidth;
                     }
                     if(y<0){//不能移出上边
                        y=0;
                     }else if(y>oBox.offsetWidth-oKa.offsetHeight){//不能移出下面
                        y=oBox.offsetWidth-oKa.offsetHeight;
                     }
                     //设置一个你移动距离和小图盒子的宽度的比
                    var prox=x/Bw1;
                    //设置一个你移动距离和小图盒子的高度的比
                    var proy=y/Bh1;
//                  这是小框的移动位置
                    oKa.style.left=x+'px';
                    oKa.style.top=y+'px';
                   // 大图片的移动位置
                    oImg.style.left=-prox*Mw2+'px'; // 比值乘以大图的宽度
                     oImg.style.top=-proy*Mh2+'px';//比值乘以大图的高度
                    }
            oBox.onmouseleave=function(){//鼠标移出事件
                oBox.onmouseover=null;//阻止默认事件鼠标移开后还在移动的bug
                oBox.onmousemove=null;//阻止默认事件鼠标移开后还在移动的bug
                oSon.style.display='none';
               oKa.style.display='none';
            }
        }
    </script>

</html>

效果如图：

这里是效果图

阳哥爱吃饭

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
javascript放大镜

简单说一下思路：需要两张一样的图片，一张图片设置放大后的样式，就是放大后的图片，大图设置绝对定位，小图的移动框设置绝对定位，先设置大图隐藏，移入小图后显示，然后获取小图的移动框位置，然后比上小图的宽，得到一个比值，然后这个比值乘以大图的移动的宽高，这就是大图的移动坐标 <!DOCTYPE html><html> <head> <meta charset="UTF-
复制链接

扫一扫