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

需要实现的效果图如下:

JS案例-仿京东放大镜效果_第1张图片

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

JS案例-仿京东放大镜效果_第2张图片JS案例-仿京东放大镜效果_第3张图片

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

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

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

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

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

JS案例-仿京东放大镜效果_第4张图片

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

最后全部代码如下:

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';

    })
})

 

你可能感兴趣的