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 bind事件使用详解
May 05 Javascript
js常用代码段整理
Nov 30 Javascript
javascript实用小函数使用介绍
Nov 11 Javascript
jQuery中scrollTop()方法用法实例
Jan 16 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
May 12 Javascript
使用jquery动态加载Js文件和Css文件
Oct 24 Javascript
跟我学习javascript的this关键字
May 28 Javascript
分享自己用JS做的扫雷小游戏
Feb 17 Javascript
jQuery Ajax Post 回调函数不执行问题的解决方法
Aug 15 Javascript
关于在mongoose中填充外键的方法详解
Aug 14 Javascript
Vue组件之单向数据流的解决方法
Nov 10 Javascript
使用Ajax实现无刷新上传文件
Apr 12 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 htmlentities和htmlspecialchars 的区别
2008/08/18 PHP
coreseek 搜索英文的问题详解
2013/06/08 PHP
smarty循环嵌套用法示例分析
2016/07/19 PHP
js+CSS 图片等比缩小并垂直居中实现代码
2008/12/01 Javascript
JavaScript 拾碎[三] 使用className属性
2010/10/16 Javascript
js中函数调用的两种常用方法使用介绍
2014/07/17 Javascript
JavaScript编程中容易出BUG的几点小知识
2015/01/31 Javascript
jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
2015/10/30 Javascript
AngularJS Toaster使用详解
2017/02/24 Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
2017/09/25 Javascript
微信小程序版翻牌小游戏
2018/01/26 Javascript
微信小程序实现列表下拉刷新上拉加载
2020/07/29 Javascript
基于vue 动态加载图片src的解决方法
2018/02/05 Javascript
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
2018/04/13 Javascript
深入浅出了解Node.js Streams
2019/05/27 Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
2020/02/14 Javascript
使用element-ui +Vue 解决 table 里包含表单验证的问题
2020/07/17 Javascript
[03:04]DOTA2英雄基础教程 影魔
2013/12/11 DOTA
python中urllib模块用法实例详解
2014/11/19 Python
python分析网页上所有超链接的方法
2015/05/08 Python
Python通过OpenCV的findContours获取轮廓并切割实例
2018/01/05 Python
python多线程之事件Event的使用详解
2018/04/27 Python
python和shell获取文本内容的方法
2018/06/05 Python
浅谈python中拼接路径os.path.join斜杠的问题
2018/10/23 Python
Python 实现数据结构中的的栈队列
2019/05/16 Python
python移位运算的实现
2019/07/15 Python
python自动化工具之pywinauto实例详解
2019/08/26 Python
Python实现迪杰斯特拉算法过程解析
2020/09/18 Python
改变 Python 中线程执行顺序的方法
2020/09/24 Python
用Python自动清理电脑内重复文件,只要10行代码(自动脚本)
2021/01/09 Python
大学生个人简历自我评价
2013/11/16 职场文书
幼儿园父亲节活动方案
2014/03/11 职场文书
投资合作协议书
2014/04/17 职场文书
党的群众路线教育实践活动对照检查材料思想汇报(党员篇)
2014/09/25 职场文书
群众路线组织生活会发言材料
2014/10/17 职场文书
银行求职自荐信范文
2015/03/04 职场文书