JavaScript怎么实现淘宝网图片的局部放大功能

本文主要介绍"JavaScript怎么实现淘宝网图片的局部放大功能" 有关的知识,希望能够解决您遇到有关问题,下面我们一起来看看这篇 "JavaScript怎么实现淘宝网图片的局部放大功能" 文章。

要实现的效果如下:

JavaScript怎么实现淘宝网图片的局部放大功能

<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>demo1</title>     <style type="text/css">         *{             margin: 0;             padding: 0;         }         .box{             position: relative;             width: 300px;             height: 200px;             background: url("./JS封面.jpg");             /*设置背景图尺寸大小*/             background-size: 300px 200px;         }         .slider{             position: absolute;             width: 100px;             height: 100px;             background: black;             /*设置透明度0~1,0是全透明。*/             opacity: 0.3;         }         .small{             position: absolute;             width: 100px;             height:100px;             background: url('./JS封面.jpg');             top: 0px;             right: -300px;             background-size: 300px 200px;             /*让元素放大,scale(3)指宽高同时放大3倍。*/             transform: scale(3);         }     </style> </head> <body>     <div class="box">         <div class="slider"></div>         <div class="small"></div>     </div> </body> </html> <script type="text/javascript">     var slider = document.querySelector('.slider');     var small = document.querySelector('.small');     //鼠标按下     slider.onmousedown = function(event){         var startX = event.offsetX;         var startY = event.offsetY;         //鼠标移动         document.onmousemove = function (event1) {             var l = event1.clientX-startX;             var t = event1.clientY-startY;             //将小滑块限制在大滑块内             if(l <= 0) l = 0;             if(l >= 200) l = 200;             if(t <= 0) t = 0;             if(t >= 100) t = 100;             slider.style.left = l+"px";             slider.style.top = t+"px";             //修改小图的背景图定位             small.style.backgroundPosition="-"+l+"px -"+t+"px";         }     }     //鼠标抬起时,将鼠标移动事件移除     document.onmouseup = function () {         document.onmousemove = null;     } </script>

代码运行效果:

JavaScript怎么实现淘宝网图片的局部放大功能

关于 "JavaScript怎么实现淘宝网图片的局部放大功能" 就介绍到这。希望大家多多支持编程宝库

首先修改统一请求路径为我们自己的登陆接口,在.env.development文件中# base apiVUE_APP_BASE_API = 'http://localhost ...