欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js仿京东放大镜效果

程序员文章站 2022-07-09 10:32:26
本文实例为大家分享了js仿京东放大镜效果的具体代码,供大家参考,具体内容如下1、效果1:鼠标经过前2、效果2:鼠标放上去,弹出右边放大镜3、效果3:鼠标在小盒子移动,放大镜跟着移动4、源代码如下:&l...

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

1、效果1:鼠标经过前

js仿京东放大镜效果

2、效果2:鼠标放上去,弹出右边放大镜

js仿京东放大镜效果

3、效果3:鼠标在小盒子移动,放大镜跟着移动

js仿京东放大镜效果

4、源代码如下:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>document</title>
  <style>
    /* 清除默认样式 */
    *{
      margin: 0;
      padding: 0;
    }

    /* 左边小盒子样式 */
    .box1{
      position: relative;
      width: 450px;
      height: 450px;
      border: 1px solid #999;
      margin-left: 80px;
      margin-top: 50px;
    }
    .box1 .img1{
      /* 设置左边图片大小 */
      width: 450px;
    }

    /* 遮罩层bg的样式 */
    .box1_bg{
       /* 一开始要隐藏起来 */
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      width: 300px;
      height: 300px;
      background-color: yellow;
      /* 透明效果 */
      opacity: .5 ;
      cursor: move;
    }


    /* 右边大盒子样式 */
    .big_img{
      /* 一开始要隐藏起来 */
      display: none;
      width: 540px;
      height: 540px;
      position: absolute;
      top: 0;
      left: 470px;
      border: 1px solid #999;
      overflow: hidden;
    }
    /* 大盒子里面的图片样式 */
    .big_img .big_imgs{
      position: absolute;
      top: 0;
      left: 0;
      width: 800px;
    }
  </style>
</head>
<body>
  <div class="box1">
    <img class="img1" src="images/2-1.jpg" alt="#" >
    <div class="box1_bg"></div>
    <div class="big_img">
      <img class="big_imgs" src="images/2.jpg" alt="#" >
    </div>
  </div>
  <!-- js代码如下 -->
  <script>
    // ①整个案例可以分为三个功能模块
    // ②鼠标经过小图片盒子,黄色的遮挡层和大图片盒子显示,离开-->隐藏2个盒子功能
    // ③黄色的遮挡层 跟随 鼠标功能。
    // ④移动黄色遮挡层,大图片跟随移动功能。
    // 事件源:
    var box1 = document.queryselector('.box1');
    var bg = document.queryselector('.box1_bg');
    var big = document.queryselector('.big_img');
    // 1. 鼠标 经过 盒子的时候,显示 遮罩层 和 放大镜
    box1.addeventlistener('mouseover',function(){
      bg.style.display = 'block';
      big.style.display = 'block';
    })
     // 2. 鼠标 离开 盒子的时候,隐藏 遮罩层 和 放大镜
    box1.addeventlistener('mouseout',function(){
      bg.style.display = 'none';
      big.style.display = 'none';
    })

    // 2.鼠标移动的时候
    box1.addeventlistener('mousemove',function(e){
      var x = e.pagex - this.offsetleft; // x是鼠标到父盒子x距离
      var y = e.pagey - this.offsettop; // y是鼠标到父盒子y距离
      // console.log(x ,y)
      // 最大移动距离,box1盒子的大小 减去 遮罩层的盒子大小  
      var max_x = box1.offsetwidth - bg.offsetwidth;
      var max_y = box1.offsetheight - bg.offsetheight;
      if( max_x >=0 )
      // *将坐标减去 遮罩层盒子的一半 鼠标就落到遮罩层的中间
      // 移动距离x,y
      var x = x - bg.offsetwidth/2;
      var y = y - bg.offsetheight/2;
      // *当遮罩层超出 box1 的边框的时候,设一个边界卡住它
      if(x <= 0 ){
        x = 0
      }else if( x >= max_x){
        x = max_x;
      }
      if(y <= 0 ){
        y=0
      }else if( y >= max_y){
        y = max_y;
      }
      // *把鼠标在盒子内的坐标给 遮罩层 实现跟随鼠标移动效果
      // 注意加上 px 不然不起效果
      bg.style.left = x +'px';
      bg.style.top = y +'px';
      
      // 右边图片跟随移动,有一个小算法:big_img_x
      // 遮挡层移动距离(x)/遮挡层最大移动距离(max_x)=大图片移动距离(bigx)/大图片移动的最大距离(big_img_x)

      // 获取 图片 事件源
      var big_img = document.queryselector('.big_imgs');
      // big_img_x 求大图片移动的最大距离 正方形 距离一样的
      var big_img_x = big_img.offsetwidth - big.offsetwidth ; 
      var big_img_y = big_img.offsetwidth - big.offsetwidth ;
      // bigx 大图片的移动距离
      var bigx = x * big_img_x / max_x ; 
      var bigy = y * big_img_y / max_x ; 
      big_img.style.left = -bigx +'px';
      big_img.style.top = -bigy +'px';
    })
  </script>
</body>
</html>

5、喜欢的话记得点赞 收藏 关注噢~

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

相关标签: js 放大镜