js仿京东放大镜效果


Posted in Javascript onAugust 09, 2020

本文实例为大家分享了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、喜欢的话记得点赞 收藏 关注噢~

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

Javascript 相关文章推荐
jQuery fadeTo方法调整图片的透明度使用介绍
May 06 Javascript
JS随机生成不重复数据的实例方法
Jul 17 Javascript
javascript 获取模态窗口的滚动位置代码
Aug 06 Javascript
jquery 插件实现瀑布流图片展示实例
Apr 03 Javascript
原生js实现返回顶部缓冲效果
Jan 18 Javascript
详解Angualr 组件间通信
Jan 21 Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
Jun 25 Javascript
详解VueJS应用中管理用户权限
Feb 02 Javascript
解决vue处理axios post请求传参的问题
Mar 05 Javascript
详解基于Vue cli生成的Vue项目的webpack4升级
Jun 19 Javascript
vue 使用 canvas 实现手写电子签名
Mar 06 Javascript
Openlayers实现扩散的动态点(水纹效果)
Aug 17 Javascript
浅谈vue-props的default写不写有什么区别
Aug 09 #Javascript
js实现带有动画的返回顶部
Aug 09 #Javascript
Vue将props值实时传递 并可修改的操作
Aug 09 #Javascript
js实现轮播图效果 纯js实现图片自动切换
Aug 09 #Javascript
vue 子组件watch监听不到prop的解决
Aug 09 #Javascript
vue 重塑数组之修改数组指定index的值操作
Aug 09 #Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
Aug 09 #Javascript
You might like
php下使用SMTP发邮件的代码
2008/01/10 PHP
PHP 源代码压缩小工具
2009/12/22 PHP
PHP session 会话处理函数
2016/06/06 PHP
PHPExcel导出2003和2007的excel文档功能示例
2017/01/04 PHP
Yii Framework框架使用PHPExcel组件的方法示例
2019/07/24 PHP
Laravel 将数据表的数据导出,并生成seeds种子文件的方法
2019/10/09 PHP
jQuery对象与DOM对象之间的相互转换
2015/03/03 Javascript
vue双向绑定简要分析
2017/03/23 Javascript
angular2+nodejs实现图片上传功能
2017/03/27 NodeJs
jQuery滚动条美化插件nicescroll简单用法示例
2018/04/18 jQuery
angular-tree-component的使用详解
2018/07/30 Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
2018/08/25 Javascript
从理论角度讨论JavaScript闭包
2019/04/03 Javascript
[02:26]2018DOTA2亚洲邀请赛赛前采访-Newbee篇
2018/04/03 DOTA
python中的字典使用分享
2016/07/31 Python
python列表生成式与列表生成器的使用
2018/02/23 Python
Django安装配置mysql的方法步骤
2018/10/15 Python
python反转列表的三种方式解析
2019/11/08 Python
python groupby 函数 as_index详解
2019/12/16 Python
解决Python3.8用pip安装turtle-0.0.2出现错误问题
2020/02/11 Python
详解python模块pychartdir安装及导入问题
2020/10/22 Python
MATCHESFASHION.COM法国官网:英国奢侈品零售商
2018/01/04 全球购物
哪些情况下不应该使用索引
2015/07/20 面试题
AJAX的全称是什么
2012/11/06 面试题
法学专业应届生求职信
2013/10/16 职场文书
护士个人简历自荐信
2013/10/18 职场文书
参赛口号
2014/06/16 职场文书
求职自我推荐信
2014/06/25 职场文书
学校法制宣传日活动总结
2014/11/01 职场文书
迟到检讨书
2015/01/26 职场文书
2015年电厂工作总结范文
2015/05/13 职场文书
地雷战观后感
2015/06/09 职场文书
功夫熊猫观后感
2015/06/10 职场文书
python numpy中multiply与*及matul 的区别说明
2021/05/26 Python
总结Java对象被序列化的两种方法
2021/06/30 Java/Android
redis sentinel监控高可用集群实现的配置步骤
2022/04/01 Redis