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 Autocomplete自动完成插件
Jul 17 Javascript
jQuery 1.5 源码解读 面向中高阶JSER
Apr 05 Javascript
js 自制滚动条的小例子
Mar 16 Javascript
让table变成exls的示例代码
Mar 24 Javascript
Js实现网页键盘控制翻页的方法
Oct 30 Javascript
JS检测移动端横竖屏的代码
May 30 Javascript
jQuery简单实现中间浮窗效果
Sep 04 Javascript
详解vantUI框架在vue项目中的应用踩坑
Dec 06 Javascript
vue组件创建的三种方式小结
Feb 03 Javascript
ant-design-vue按需加载的坑的解决
May 14 Javascript
Vue-resource安装过程及使用方法解析
Jul 21 Javascript
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 Vue.js
浅谈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
10条PHP高级技巧[修正版]
2011/08/02 PHP
PHP5.3的垃圾回收机制(动态存储分配方案)深入理解
2012/12/10 PHP
thinkPHP自动验证机制详解
2016/12/05 PHP
破除一些网站复制、右键限制
2006/11/04 Javascript
javascript 兼容所有浏览器的DOM扩展功能
2012/08/01 Javascript
基于JavaScript代码实现自动生成表格
2016/06/15 Javascript
Express与NodeJs创建服务器的两种方法
2017/02/06 NodeJs
JS将unicode码转中文方法
2017/05/08 Javascript
详解React Native网络请求fetch简单封装
2017/08/10 Javascript
对于Javascript 执行上下文的全面了解
2017/09/05 Javascript
vue组件之Alert的实现代码
2017/10/17 Javascript
Vue props用法详解(小结)
2018/07/03 Javascript
微信小程序仿通讯录功能
2020/04/09 Javascript
使用jQuery实现购物车
2020/10/29 jQuery
[03:03]DOTA2校园争霸赛 济南城市决赛欢乐发奖活动
2013/10/21 DOTA
数据挖掘之Apriori算法详解和Python实现代码分享
2014/11/07 Python
在Python中使用Mako模版库的简单教程
2015/04/08 Python
python写入中英文字符串到文件的方法
2015/05/06 Python
Python三级目录展示的实现方法
2016/09/28 Python
老生常谈python之鸭子类和多态
2017/06/13 Python
Python线性方程组求解运算示例
2018/01/17 Python
Windows 8.1 64bit下搭建 Scrapy 0.22 环境
2018/11/18 Python
python 多线程重启方法
2019/02/18 Python
详解Python学习之安装pandas
2019/04/16 Python
使用keras内置的模型进行图片预测实例
2020/06/17 Python
基于Django快速集成Echarts代码示例
2020/12/01 Python
英国领先的维生素和营养补充剂直接供应商:Healthspan
2019/04/22 全球购物
德国亚洲食品网上商店:asiafoodland.de
2019/12/28 全球购物
这76道Java面试题及答案,祝你能成功通过面试
2016/04/16 面试题
兼职业务员岗位职责
2014/01/01 职场文书
伊索寓言教学反思
2014/05/01 职场文书
企业消防安全责任书
2014/07/23 职场文书
水电维修专业推荐信
2014/09/06 职场文书
普通员工辞职信范文
2015/05/12 职场文书
Python 用户输入和while循环的操作
2021/05/23 Python
Vue.js中v-bind指令的用法介绍
2022/03/13 Vue.js