JavaScript仿京东放大镜效果
程序员文章站
2022-06-18 13:31:08
本文实例为大家分享了javascript实现京东放大镜效果的具体代码,供大家参考,具体内容如下案例分析 整个案例可以分为三个功能模块 鼠标经过小图片盒子, 黄色的遮挡层 和 大图片盒子显示...
本文实例为大家分享了javascript实现京东放大镜效果的具体代码,供大家参考,具体内容如下
案例分析
- 整个案例可以分为三个功能模块
- 鼠标经过小图片盒子, 黄色的遮挡层 和 大图片盒子显示,离开隐藏2个盒子功能
- 黄色的遮挡层跟随鼠标功能。
- 移动黄色遮挡层,大图片跟随移动功能。
- 鼠标经过小图片盒子, 黄色的遮挡层 和 大图片盒子显示,离开隐藏2个盒子功能
- 就是显示与隐藏
- 移动黄色遮挡层,大图片跟随移动功能,大图片的移动距离要跟黄色遮挡层的比例相等。
- 求大图片的移动距离公式
代码
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>document</title> <style> .preview_wrap { width: 400px; height: 400px; } .preview_img { position: relative; height: 398px; border: 1px solid #ccc; } .mask { display: none; position: absolute; top: 0; left: 0; width: 300px; height: 300px; background: #fede4f; opacity: .5; border: 1px solid #ccc; cursor: move; } .big { display: none; position: absolute; left: 410px; top: 0; width: 500px; height: 500px; background-color: pink; z-index: 999; border: 1px solid #ccc; overflow: hidden; } /* 要给图片加了绝对定位,才可以设置 left top */ .big img { position: absolute; top: 0; left: 0; } </style> </head> <body> <div class="preview_wrap"> <div class="preview_img"> <img src="images/s3.png" alt=""> <div class="mask"></div> <div class="big"> <img src="images/big.jpg" alt="" class="bigimg"> </div> </div> </div> <script> var preview_img = document.queryselector('.preview_img'); var mask = document.queryselector('.mask'); var big = document.queryselector('.big'); // 1. 当我们鼠标经过 preview_img 就显示和隐藏 mask 遮挡层 和 big 大盒子 preview_img.addeventlistener('mouseover', function() { mask.style.display = 'block'; big.style.display = 'block'; }) preview_img.addeventlistener('mouseout', function() { mask.style.display = 'none'; big.style.display = 'none'; }) // 2. 鼠标移动的时候,让黄色的盒子跟着鼠标来走 preview_img.addeventlistener('mousemove', function(e) { // (1). 先计算出鼠标在盒子内的坐标 var x = e.pagex - this.offsetleft; var y = e.pagey - this.offsettop; // console.log(x, y); // (2) 减去盒子高度 300的一半 是 150 就是我们mask 的最终 left 和top值了 // (3) 我们mask 移动的距离 var maskx = x - mask.offsetwidth / 2; var masky = y - mask.offsetheight / 2; // (4) 如果x 坐标小于了0 就让他停在0 的位置 // 遮挡层的最大移动距离 var maskmax = preview_img.offsetwidth - mask.offsetwidth; if (maskx <= 0) { maskx = 0; } else if (maskx >= maskmax) { maskx = maskmax; } if (masky <= 0) { masky = 0; } else if (masky >= maskmax) { masky = maskmax; } mask.style.left = maskx + 'px'; mask.style.top = masky + 'px'; // 3. 大图片的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离 // 大图 var bigimg = document.queryselector('.bigimg'); // 大图片最大移动距离 var bigmax = bigimg.offsetwidth - big.offsetwidth; // 大图片的移动距离 x y var bigx = maskx * bigmax / maskmax; var bigy = masky * bigmax / maskmax; bigimg.style.left = bigx + 'px'; bigimg.style.top = bigy + 'px'; }) </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
推荐阅读
-
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
-
javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
-
Android 仿京东商城底部布局的选择效果(Selector 选择器的实现)
-
jQuery实现仿京东防抖动菜单效果示例
-
Javascript仿京东放大镜的效果
-
JavaScript实现京东购物放大镜和选项卡效果的方法分析
-
纯js仿淘宝京东商品放大镜功能
-
JavaScript编程开发中如何使用jquery实现放大镜效果
-
iOS【TabBar菜单push隐藏菜单栏转场动画(仿(京东) 及 (东方财富通) tabBar效果)】
-
javascript实现的仿腾讯QQ窗口抖动效果代码