0
点赞
收藏
分享

微信扫一扫

淘宝京东图片放大镜

Sophia的玲珑阁 2021-09-24 阅读 139
基础前端

获取淘宝放大图的两种方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>放大镜实例！</title>
    <style>
        * {margin: 0;padding: 0;}
        .box {
            width: 300px;
            height: 400px;
            margin: 80px;
            position: relative;
        }
        .box .zoom {
            position: absolute;
            top: 0;
            left: 0;
            width: 160px;
            height: 160px;
            background: url(https://gtms01.alicdn.com/tps/i4/T12pdtXaldXXXXXXXX-2-2.png) repeat  0 0 ;
            cursor: move;
            display: none;
        }
        .box .large {
            position: absolute;
            left: 350px;
            top: 0;
            background: url(images/large.jpg) no-repeat;
            width: 400px;
            height: 400px;
            display: none;
        }
    </style>
</head>
<body>
    <div class="box" id= "box">
        <img src="images/small.jpg" alt="睡衣">
        <div class="zoom" id= "zoom"></div>
        <div class="large" id = "large"></div>
    </div>
    <script>
        var box = document.getElementById("box");
        var zoom = document.getElementById("zoom");
        var large = document.getElementById("large");

        //小图相对于大图的缩放比例
        var rate = 140 / 350;

        //鼠标进入显示zoom和large
        box.onmouseover = function(){
            zoom.style.display = "block";
            large.style.display = "block";
        }
        //鼠标离开隐藏zoom和large
        box.onmouseout = function(){
            zoom.style.display = "none";
            large.style.display = "none";
        }

        //移动事件的监听，移动范围定义在box里
        box.onmousemove = function(event){
            //处理event的兼容
            event = event || window.event;

            //得到页面的卷动值
            var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
            var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
            
            //(getAllLeft(box) - scrollLeft)先计算box的净left值减去卷动值，得到类似box盒子没有父定位盒子和卷动值的offsetleft
            //(getAllTop(box) - scrollTop)先计算box的净top值减去卷动值，得到类似box盒子没有父定位盒子和卷动值的offsettop
            //x , y表示zoom盒子在box盒子里面x,y的距离。
            //最后减去八十，八十是zoom盒子宽的一半，目的是让鼠标在zoom盒子中间
            var x = event.clientX - (getAllLeft(box) - scrollLeft) - 80;
            var y = event.clientY - (getAllTop(box) - scrollTop) - 80 ;

            //此处的if语句目的是让zoom盒子移动时不能超出box盒子的范围
            if(x < 0){
                x = 0;
            }else if(x > 140){
                x = 140;
            }
            if(y < 0){
                y = 0;
            }else if(y > 240){
                y = 240;
            }

            //更改zoom盒子在box盒子里的位置
            zoom.style.left = x + "px";
            zoom.style.top = y + "px";
            //更改大图large盒子里background-position的位置，同时通过rate与zoom的移动距离保持一致
            large.style.backgroundPosition = -x/rate + "px" +" " + -y/rate+ "px";

            //封装函数用来得到对象obj的净top值
            function getAllTop(obj){
                var Alltop = obj.offsetTop;
                var currentobj = obj;
                while(currentobj = currentobj.offsetParent){
                    Alltop += currentobj.offsetTop;
                }
                return Alltop;
            }
            //封装函数用来得到对象obj的净left值
            function getAllLeft(obj){
                var Allleft = obj.offsetLeft;
                var currentobj = obj;
                while(currentobj = currentobj.offsetParent){
                    Allleft += currentobj.offsetLeft;
                }
                return Allleft;
            }
        }
    </script>
</body>
</html>

为了降低耦合性对程序进行改动如下：

  1. 放大镜 zoom 盒子定位中心点的方法由减去八十改为 zoom.offsetWidth/2
  2. if 语句防止放大镜 zoom盒子出线的值改为根据盒子本身宽调整大小。
    140→ box.offsetHeight - zoom.offsetHeight
    240→ box.offsetHeight - zoom.offsetHeight
  3. rate 比率修改，要是想降低 rate 的耦合性，就不能使用背景定位法，必须改用绝对定位方法。使用 overflow: hidden;

修改后的源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>放大镜实例！</title>
    <style>
        * {margin: 0;padding: 0;}
        .box {
            width: 300px;
            height: 400px;
            margin: 80px;
            position: relative;
        }
        .box .zoom {
            position: absolute;
            top: 0;
            left: 0;
            width: 160px;
            height: 160px;
            background: url(https://gtms01.alicdn.com/tps/i4/T12pdtXaldXXXXXXXX-2-2.png) repeat  0 0 ;
            cursor: move;
            display: none;
        }
        .box .large {
            position: absolute;
            left: 350px;
            top: 0;
            /*background: url(images/large.jpg) no-repeat;*/
            width: 400px;
            height: 400px;
            display: none;
            overflow: hidden;
        }
        .box .large .pic {
            position: absolute;
        }
        
    </style>
</head>
<body>
    <div class="box" id= "box">
        <img src="images/small.jpg" alt="睡衣">
        <div class="zoom" id= "zoom"></div>
        <div class="large" id = "large"><img src="images/large.jpg" alt="" id="pic" class = "pic"></div>
    </div>
    <script>
        var box = document.getElementById("box");
        var zoom = document.getElementById("zoom");
        var large = document.getElementById("large");
        var pic = document.getElementById("pic");

        //小图相对于大图的缩放比例
        // var rate = 140 / 350;

        //鼠标进入显示zoom和large
        box.onmouseover = function(){
            zoom.style.display = "block";
            large.style.display = "block";
        }
        //鼠标离开隐藏zoom和large
        box.onmouseout = function(){
            zoom.style.display = "none";
            large.style.display = "none";
        }

        //移动事件的监听，移动范围定义在box里
        box.onmousemove = function(event){

            //只有触发move事件zoom.offsetWidth和large.offsetWidth才有值。
            var rate = (box.offsetWidth - zoom.offsetWidth) / (pic.offsetWidth - large.offsetWidth);
            //处理event的兼容
            event = event || window.event;

            //得到页面的卷动值
            var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
            var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
            
            //(getAllLeft(box) - scrollLeft)先计算box的净left值减去卷动值，得到类似box盒子没有父定位盒子和卷动值的offsetleft
            //(getAllTop(box) - scrollTop)先计算box的净top值减去卷动值，得到类似box盒子没有父定位盒子和卷动值的offsettop
            //x , y表示zoom盒子在box盒子里面x,y的距离。
            //最后减去八十，八十是zoom盒子宽的一半，目的是让鼠标在zoom盒子中间
            var x = event.clientX - (getAllLeft(box) - scrollLeft) - zoom.offsetWidth/2;
            var y = event.clientY - (getAllTop(box) - scrollTop) - zoom.offsetWidth/2;

            //此处的if语句目的是让zoom盒子移动时不能超出box盒子的范围
            if(x < 0){
                x = 0;
            }else if(x > box.offsetWidth - zoom.offsetWidth){
                x = box.offsetWidth-zoom.offsetWidth;
            }
            if(y < 0){
                y = 0;
            }else if(y > box.offsetHeight - zoom.offsetHeight){
                y = box.offsetHeight - zoom.offsetHeight;
            }

            //更改zoom盒子在box盒子里的位置
            zoom.style.left = x + "px";
            zoom.style.top = y + "px";
            //更改大图large盒子里background-position的位置，同时通过rate与zoom的移动距离保持一致
            // large.style.backgroundPosition = -x/rate + "px" +" " + -y/rate+ "px";
            pic.style.left = -x/rate + "px";
            pic.style.top = -y/rate+ "px";

            //封装函数用来得到对象obj的净top值
            function getAllTop(obj){
                var Alltop = obj.offsetTop;
                var currentobj = obj;
                while(currentobj = currentobj.offsetParent){
                    Alltop += currentobj.offsetTop;
                }
                return Alltop;
            }
            //封装函数用来得到对象obj的净left值
            function getAllLeft(obj){
                var Allleft = obj.offsetLeft;
                var currentobj = obj;
                while(currentobj = currentobj.offsetParent){
                    Allleft += currentobj.offsetLeft;
                }
                return Allleft;
            }
        }
    </script>
</body>
</html>
举报

相关推荐

仿京东淘宝放大镜效果 JavaScript

css3csshtml5javascript

京东放大镜案例

前端JavaScript

仿京东放大镜效果

csscss3html

原生js模仿京东图片放大镜效果

jscihtml代码人生

仿淘宝的放大镜效果

仿淘宝的放大镜效果csshtmljqueryJavaScript前端开发

模仿京东放大镜的效果

csscss3html

JS案例-仿京东放大镜效果

csshtmlcss3javascript前端

jQuery图片放大镜插件jqzoom

cssjavascripthtmlPython后端开发

js实现图片放大镜效果

js图片放大镜csshtml代码人生

放大镜21

sedMathTimejscanvasJavaScript前端开发
0 条评论