电商放大镜效果

最新推荐文章于 2023-10-12 17:48:48 发布

宇恒ngIf

最新推荐文章于 2023-10-12 17:48:48 发布

阅读量354

点赞数

文章标签：原生JS 放大镜效果

本文链接：https://blog.csdn.net/qq_36369717/article/details/53068250

版权

轮播图、放大镜、购物车是现在电商页面不可缺少的几个功能，今天研究了一下放大镜，简单聊聊放大镜的效果极其原理。

放大镜其实就是两张一样的图片，布局很简单，一张大图，一张小图，起始状态是小图中的span以及大图隐藏，当鼠标移入到小图所在的div中时，span以及大图显示，移出时span以及大图隐藏。利用事件冒泡给小图片所在的div加鼠标移动事件，设置span在小图所在div的移动范围，然后按比例完成放大镜效果，实现代码如下:

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           *{
               margin: 0;
               padding: 0;
           }
           #box1{
               width: 171px;
               height: 256px;
               position: relative;
           }
           #span{
               width: 50px;
               height: 50px;
               background: #fff;
               opacity: 0.3;
               filter: alpha(opacity=30);
               position: absolute;
               top: 0;
               left: 0;
               display: none;
           }
           #box2{
               width: 171px;
               height: 256px;
               position: absolute;
               left: 191px;
               top: 0;
               overflow: hidden;
               display:none;
           }
           #box2 img{
               position: absolute;
           }
       </style>
       <script>
           window.onload = function(){
               //获取所有元素
               var oBox1 = document.getElementById('box1');
               var oBox2 = document.getElementById('box2');
               var oSpan = document.getElementById('span');
               var oImg = oBox2.getElementsByTagName('img')[0];
               //给小div添加鼠标移入事件
               oBox1.onmouseover = function(){
                   oSpan.style.display = 'block';//让小块显示出来
                   oBox2.style.display = 'block';//同时让大图显示出来
               };
               //给小div添加鼠标移出事件
               oBox1.onmouseout = function(){
                   oSpan.style.display = 'none';//让小块隐藏
                   oBox2.style.display = 'none';//同时让大图隐藏
               };

               oBox1.onmousemove = function(evt){
                   var e = evt || window.event;
                   //鼠标页面位置 - 最外面div到页面左边的距离 - oSpan的宽度/2 (使鼠标到oFloat的中心位置);
                   var l = e.clientX - oSpan.offsetWidth / 2;
                   var t = e.clientY - oSpan.offsetHeight / 2;
                   //限制边界
                   if(l < 0){
                       l = 0;
                   }else if(l > oBox1.offsetWidth - oSpan.offsetWidth){
                       l = oBox1.offsetWidth - oSpan.offsetWidth;
                   }

                   if(t < 0){
                       t = 0;
                   }else if(t > oBox1.offsetHeight - oSpan.offsetHeight){
                       t = oBox1.offsetHeight - oSpan.offsetHeight;
                   }

                   oSpan.style.left = l + 'px';
                   oSpan.style.top = t + 'px';
                   //小块活动的距离（移动比例）（大图显示比例）
                   var percentX = l / (oBox1.offsetWidth - oSpan.offsetWidth);
                   var percentY = t / (oBox1.offsetHeight - oSpan.offsetHeight);
                   //大图的left值 = 移动比例 * （大图的宽度 - 大图所在Div的宽度）（大图所能移动的距离）
                   oImg.style.left = - percentX * (oImg.offsetWidth - oBox2.offsetWidth) + 'px';
                   oImg.style.top = - percentY * (oImg.offsetHeight - oBox2.offsetHeight) + 'px';
               };
           };
       </script>
   </head>
   <body>
       <div id="box1">
           <img src="img/small.jpg"/>
           <span id="span">

           </span>
       </div>
       <div id="box2">
           <img src="img/big.jpg"/>
       </div>
   </body>
</html>

宇恒ngIf

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
电商放大镜效果

轮播图、放大镜、购物车是现在电商页面不可缺少的几个功能，今天研究了一下放大镜，简单聊聊放大镜的效果极其原理。放大镜其实就是两张一样的图片，布局很简单，一张大图，一张小图，起始状态是小图中的span以及大图隐藏，当鼠标移入到小图所在的div中时，span以及大图显示，移出时span以及大图隐藏。利用时间冒泡事件给小图片所在的div加鼠标移动事件，设置span在小图所在div的移动范围，然后按比例
复制链接

扫一扫