您现在的位置是：网站首页> 编程资料编程资料

JS实现京东放大镜效果_javascript技巧_

2023-05-24 331人已围观

简介 JS实现京东放大镜效果_javascript技巧_

本文实例为大家分享了JS实现京东放大镜效果的具体代码，供大家参考，具体内容如下

需要实现的效果图如下：

①布局：布局采用一个大盒子里面首先分为上下两个部分，然后下部分又分为左右两个部分。左边的盒子里面放了一个img和一个遮罩层cover，右边盒子里面放的是800*800的大图片，这里提供左边的图片b3.png和右边的大图片big.jpg:

注意：左边盒子里面的cover采用绝对定位，右边盒子里面的img采用绝对定位。

②功能实现：主要有三个功能模块：

1.鼠标经过（mouseover）左边盒子，黄色的遮罩层以及右边盒子显示，鼠标离开（mouseout）则隐藏黄色遮罩层以及右边盒子。

2.黄色遮罩层跟随鼠标移动（mousemove）。鼠标在盒子的坐标=鼠标在页面的坐标-左边盒子在页面的坐标，但是又因为鼠标是在遮罩层的中间，所以最终的坐标要减去遮罩层一半的高度和宽度。注意这里有边界条件：就是黄色遮罩层的移动距离，黄色遮罩层的x方向的移动距离不能小于0且不能大于左边盒子宽度减去遮罩层的宽度。

3.移动黄色遮罩层，大图片跟随移动功能。大图片移动的距离根据下面这个公式来进行计算：

遮挡层的移动距离上一点已经算过了，遮罩层的最大移动距离上面也说了，剩下的就是大图片最大移动距离，大图片最大移动距离=图片的大小-右边盒子的大小。

最后全部代码如下：

html代码：

                       京东放大镜效果                  
         
             
                     
  • 全部商品分类
    •                  
  • 服装城
    •                  
  • 美妆馆
    •                  
  • 传智超市
    •                  
  • 全球购
    •                  
  • 闪购
    •                  
  • 团购
    •                  
  • 拍卖
    •                  
  • 有趣
    •              
         
         
             
                 
                     
                             
  • 手机、数码、通讯  >
    •                          
  • 手机  >
    •                          
  • Apple苹果  >
    •                          
  • iphone 6S Plus系统  
    •                      
                     
                                                  
                     
                 
             
             
                              
         
       
  

外部js文件：

window.addEventListener('load', function() {     // 获取元素     var cover = this.document.querySelector('.cover');     var leftphone = this.document.querySelector('.leftphone');     var rightbox = this.document.querySelector('.rightbox');     var big = this.document.querySelector('.big');     // 鼠标移动到左边的手机上的时候遮罩层和右边的手机显示出来     leftphone.addEventListener('mouseover', function() {         cover.style.display = 'block'         rightbox.style.display = 'block'     })     // 鼠标移离开到左边的手机上的时候遮罩层和右边的手机隐藏      leftphone.addEventListener('mouseout', function() {         cover.style.display = 'none'         rightbox.style.display = 'none'     })     leftphone.addEventListener('mousemove', function(e) {         var x = e.pageX - this.offsetLeft;         var y = e.pageY - this.offsetTop;         // x的移动距离         var totalx = x - cover.offsetWidth / 2;         var totaly = y - cover.offsetHeight / 2         if (totalx < 0) {             totalx = 0;         } else if (totalx >= leftphone.offsetWidth - cover.offsetWidth) {             totalx = leftphone.offsetWidth - cover.offsetWidth;         }         if (totaly < 0) {             totaly = 0;         } else if (totaly >= leftphone.offsetHeight - cover.offsetHeight) {             totaly = leftphone.offsetHeight - cover.offsetHeight;         }         cover.style.left = totalx + 'px';         cover.style.top = totaly + 'px';         // imgmaxx是图片最大x移动距离         var imgmaxx = rightbox.offsetWidth - big.offsetWidth;         var imgmaxy = rightbox.offsetHeight - big.offsetHeight;         var imgmovex = totalx * imgmaxx / (leftphone.offsetWidth - cover.offsetWidth)         var imgmovey = totaly * imgmaxy / (leftphone.offsetHeight - cover.offsetHeight)         big.style.left = imgmovex + 'px';         big.style.top = imgmovey + 'px';       }) })

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

您可能感兴趣的文章:

上一篇：前端必会的Webpack优化技巧_javascript技巧_

下一篇：e.target与e.currentTarget对象的使用区别详解_javascript技巧_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网