原生JS实现京东商城同步放大镜功能

目录

• • 1，前言
  • 2，原效果
  • 3，思路
  • 4，实现代码

1，前言

分享一下使用原生JS实现京东购物的放大镜功能，也就是鼠标移动到左侧商品小图，在右侧出现大图，并且实现同步。

2，原效果

原效果：京东商城

3，思路

这个效果可以分解成三步。
一，鼠标悬停在box1上显示拖动块，移出box1时隐藏拖动块。
二，实现拖动块在box1上移动。
三，实现拖动块在box1上移动，大图也跟着一起同步移动。

4，实现代码

html

<div id="box1"><img src="xiao.jpg"><span>span>
div>
<div id="box2"><img src="da.jpg">
div>

css

//盛放小图的盒子
#box1{width: 180px;height: 180px;overflow: hidden;position: relative;left: 100px;cursor: move;
}
//小图上可拖动的滑块
#box1 span{position: absolute;width: 100px;height: 100px;background: yellow;opacity: .5;display: inline-block;top:0;left: 0;display: none;
}
//盛放大图的盒子
#box2{width: 500px;height: 500px;position: absolute;overflow: hidden;left: 350px;top:0;
}
#box2 img{ position: absolute;top:0; left: 0}

script

//先获取DOM
var box1 = document.getElementById("box1")//小盒子
var box2 = document.getElementById("box2")//大盒子
var oSpan = box1.getElementsByTagName("span")[0];//滑块
var oImg= box2.getElementsByTagName("img")[0];//大盒子里的大图片

box1的浮动事件

//box1的浮动事件
box1.onmouseover = function (ev) {
//第一步，滑块显示oSpan.style.display = "block";//然后，获取滑块距离窗口的左边和上边的距离var disx = ev.clientX;var disy = ev.clientY;//box1的鼠标移动事件box1.onmousemove = function (ev2) {//获取事件对象var ev2 = ev2||window.event;//获取滑块左边框距离box1左边框的距离。也就等于鼠标相对于窗口左边的距离减去box1相对于窗口左边的距离再减去滑块宽度的一半。var L = ev2.clientX-box1.offsetLeft-oSpan.offsetWidth/2;//获取滑块上边框距离box1上边框的距离，原理同上var T = ev2.clientY-box1.offsetTop-oSpan.offsetHeight/2;//当距离小于0时，让它始终等于0，也就是滑块不会超出box1的范围。if(L<0) L=0;//当距离大于box1的宽减去滑块的宽的时候，限制滑块距离box1左边的的最大值。if(L>=box1.offsetWidth-oSpan.offsetWidth){L=box1.offsetWidth-oSpan.offsetWidth}//限制高度，原理同上if(T<0) T=0;if(T>=box1.offsetHeight-oSpan.offsetHeight){T=box1.offsetHeight-oSpan.offsetHeight}//设置滑块的位置，让其跟着鼠标移动，且鼠标始终在滑块的中心位置。oSpan.style.left = L+"px";oSpan.style.top = T+"px";//获取滑块和box1的的距离比例var scaleX = L/(box1.offsetWidth-oSpan.offsetWidth);var scaleY = T/(box1.offsetHeight-oSpan.offsetHeight);//设置右侧大图的左边定位距离。也就是滑块和box1的距离比乘以大图片的宽减去box2的值oImg.style.left = "-"+scaleX*(oImg.offsetWidth-box2.offsetWidth)+"px";设置右侧大图的高度定位距离。oImg.style.top =  "-"+scaleY*(oImg.offsetHeight-box2.offsetHeight)+"px";}
}

//设置一下鼠标移出时隐藏滑块
box1.onmouseout = function (ev) {box1.onmousemove = null;oSpan.style.display = "none";
}

上个效果图

如果看了觉得有帮助的，我是@鹏多多i，欢迎 点赞 关注 评论；
END

公众号

往期文章

• 微信小程序实现上传多张本地图片到服务器和图片预览
• JS实用方法DataUrl转为File、url转base64
• 微信小程序API交互的自定义封装

个人主页

• CSDN
• GitHub
• 简书
• 博客园
• 掘金

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！