29 仿京东放大镜案例

1.仿京东放大镜案例

功能需求：

鼠标经过小图片盒子，黄色的遮挡层和大图片盒子显示，鼠标一离开隐藏2个盒子功能

// 当页面全部加载完毕，因此需要load，执行里面的js代码
window.addEventListener("load", function() {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";});
};

黄色的遮挡层跟随鼠标功能

把鼠标的坐标给遮挡层不合适，因为遮挡层坐标以父盒子为准；
首先是获得鼠标在盒子中的坐标；
之后把数值赋值给遮挡层作为left和top值；
此时使用到鼠标移动事件，但是还是在小图片盒子内移动；
发现，遮挡层中鼠标的位置不对，需要再减去盒子自身高度和宽度的一半；
遮挡层不能超出小图片盒子的范围；
如果mask.style.left和mask.style.top小于等于0，就把坐标设置为0；
如果mask.style.left和mask.style.top大于等于preview_img.offsetWidth - mask.offsetWidth，就把坐标设置为最大的移动距离即小图片盒子宽度减去遮挡层盒子宽度；

    // 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 Yvar bigX = maskX * bigMax / maskMax;var bigY = maskY * bigMax / maskMax;bigIMg.style.left = -bigX + "px";  // 注意大图的移动方向与遮罩层的移动方向是反的bigIMg.style.top = -bigY + "px";

2.资料下载

笔记及代码，欢迎star,follow,fork…

29 仿京东放大镜案例相关推荐

仿京东放大镜案例（pink）
本文展示htm css 以及 js代码部分,字体以及图片等完整资源可以到我的空间下载,里面有完整版. detail.html <!DOCTYPE html> <html lang=& ...
vue版本的仿京东放大镜代码还有原生js版本的。（组件封装）
vue版本的仿京东放大镜 <template><div class="maxBox"><divref="left"class=&q ...
仿京东放大镜效果的实现
仿京东放大镜 (1) 整个案例可以分为三个功能模块 (2) 鼠标经过小图片盒子, 绿色的遮挡层和大图片盒子显示,离开隐藏2个盒子功能 (3)绿色的遮挡层跟随鼠标功能. (4)移动绿色遮挡层,大图片 ...
JS案例-仿京东放大镜效果
需要实现的效果图如下: ①布局:布局采用一个大盒子里面首先分为上下两个部分,然后下部分又分为左右两个部分.左边的盒子里面放了一个img和一个遮罩层cover,右边盒子里面放的是800*800的大图片, ...
vue仿京东放大镜加商品缩略图轮播组件
以下是最终的vue版本,光滑流畅,99%还原京东放大镜甚至更好,不会出现多次操作会变卡的问题 1.vue版本 6/23日更新,处理图片尺寸过小无法通过拖动实现放大移动效果的问题 7/18日更新,关于视 ...
b站pink老师JavaScript的PC端网页特效案例代码——仿京东放大镜效果
目录原理讲解: 代码段: 1. detail.html部分(重点在标红区) 2. detail.js部分(全部都是重点) 3. detail.css部分(重点在标红区) 4. base.css部分( ...
仿京东放大镜效果案例
01-detail.html <!DOCTYPE html> <html lang="en"><head><meta charset=&q ...
vue版本的仿京东放大镜代码还有原生js版本的。（组件封装
src="https://imgres.crsky.com/crsky/60/297162-20210421095209607f8549bd770.jpg" alt="& ...
仿京东购物界面放大镜效果
背景知识:元素偏移量 offset offset 翻译为偏移量 ,使用 offset 的相关属性可以动态的得到该元素的位置(偏移).大小等. 获得元素距离带有定位父元素的位置获得元素自身的大小(宽 ...

29 仿京东放大镜案例

1.仿京东放大镜案例

2.资料下载

29 仿京东放大镜案例相关推荐

最新文章

热门文章