随着科技的发展,网购已成为大家生活中必不可少的一个模式,各种电商平台也如雨后春笋般涌现出来,今天我们就来用原生js来实现类似淘宝选购物品时的放大镜效果.
这里要用到大小两张图片,我选取的是800x800和350x350大小的两张图片
图片来源于网络
首先写出html和css样式
html部分
<body>
<div class="min">
<img src="img/1.jpg" />
<div class="fd"></div>
</div>
<div class="max"><img src="img/2.jpg" /></div>
</body>
原理是创建min和max两个区域,将小图img/1.jpg和创建的放大镜divfd放到min中,将大图img/2.jpg放到max中
css样式部分
<style type="text/css">
.min{
width: 350px;
height: 350px;
border: 1px solid black;
float: left;
position: relative;
}
.max{
width: 350px;
height: 350px;
border: 1px solid black;
float: left;
display: none;
overflow: hidden;
position: relative;
}
.max img{
position: absolute;
margin: 0 auto;
}
.fd{
width: 153.125px;
height: 153.125px;
background-color: skyblue;
opacity: 0.3;
position: absolute;
top: 0;
left: 0;
display: none;
}
这里需要强调的是
1.大图相对于父级绝对定位。
2.放大镜的宽高,如果按照我选的尺寸的两张图宽高必须为153.125px,否则会出现左侧所选区域和右侧显示区域不能完全吻合的情况;
3.大图的父级max定义的框尺寸为什么比里面的图片小?(这里的框相当于一个窗户,里面的图片相当于窗子一面的物体,无论里面的物体多大也只能显示出窗子的尺寸)
4.当鼠标放在小图外区域时,大图和放大镜无显示,所以开始置max和fd里display:none;
为了显示效果我们先把display:none注掉,此时效果如下
样式图
js部分
首先分析逻辑顺序
1.鼠标覆盖显示max和fd
2.确定放大镜的移动范围(不能出min)
3.max的对应显示
然后按顺序书写代码
定义变量
<script type="text/javascript">
var min = document.querySelector(".min"),
max = document.querySelector(".max"),
img = document.querySelector(".max img"),
fd = document.querySelector(".fd");
操作
min.onmouseover = function(){
//1.鼠标覆盖显示max和fd
max.style.display = "block";
fd.style.display = "block";
}
//离开时隐藏
min.onmouseout= function(){
max.style.display = "none";
fd.style.display = "none";
}
//2.fd的移动范围
min.onmousemove = function(){
//鼠标触摸的点
var x = event.clientX-min.offsetLeft-fd.offsetWidth/2;
var y = event.clientY-min.offsetTop-fd.offsetHeight/2;
//最大移动距离
var maxX = min.clientWidth-fd.offsetWidth;
var maxY = min.clientHeight-fd.offsetHeight;
//边界判断
if(x<=0){
x=0;
}else if(x>=maxX){
x=maxX;
}
if(y<=0){
y=0;
}else if(y>=maxY){
y=maxY;
}
//fd的位置
fd.style.left = x+"px";
fd.style.top = y+"px";
//fd/min = max/img
//移动比例
var yidongX = x/maxX;
var yidongY = y/maxY;
//移动
//3.max的对应显示
// 对于大图而言 放大镜在小图上移动的比例 相当于img在可显示区域上移动的比例 放大镜右移等于图片左移
// 也就是本质上为img - max 然而需要负值 则*-1 简化后 为max-img
img.style.left = yidongX * (max.clientWidth - img.offsetWidth) + "px";
img.style.top = yidongY * (max.clientHeight - img.offsetHeight) + "px";
}
</script>
最后根据需求完善即可
实现效果如下
1.gif
