需求：商品展示图片的放大效果，
运用技术：onmousemove,event事件，event.clientX,event.clientY,简单的实现商品放大效果，
tips：可以下载源码直接放到编辑器里面看效果，请注意需要往class为img的img标签里添加图片地址，这样就可以实现一个简单的放大镜效果了，
源码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
width:800px;
height:600px;
border:1px solid #000;
position:relative;
float:left;
margin:0 50px;
}
img{
width:800px;
height:600px;
}
.box div{
width:200px;
height:200px;
background-color: rgba(225,225,225,.5);
position:absolute;
left:0;
right:0;
display: none;
overflow: hidden;
border-radius: 100px;
box-shadow: 0px 0px 5px #000;
border:1px solid #000;
cursor: pointer;
}
.showBox{
width:400px;
height:400px;
border:1px solid #000;
float: left;
margin-top:150px;
position: relative;
overflow: hidden;
border-radius: 200px;
}
.move{
position:absolute;
left:0;
top:0;
}
.foloow{
position:absolute;
top:0;
left:0;
}
</style>
</head>
<body>
<div class="box">
<img src="img/5.jpg" alt="" class = "img"/>
<div>
<img src="" alt="" class="foloow" />
</div>
</div>
<div class="showBox"><img src="" alt="" class ="move"/></div>
</body>
<script type="text/javascript">
// 获取元素，大盒子
var box = document.querySelector(‘.box‘);
// 获取放大镜
var div = document.querySelector(‘.box div‘);
// 获取显示放大镜的盒子
var showBox = document.querySelector(‘.showBox‘);
// 获取放大镜内部的图片
var floow = document.querySelector(‘.foloow‘);
// 获取需要移动的放大镜盒子里面的图片
var move = document.querySelector(‘.move‘);
var img = document.querySelector(‘.img‘);
// 获取盒子内部的图片地址
var src = img.src;
box.onmousedown = function(ev){
ev.preventDefault();
}
box.onmousemove = function(ev){
ev.preventDefault();
// 放大镜显示
div.style.display = ‘block‘;
// 获取光标x轴位置
var x = ev.clientX;
// 获取光标Y轴位置
var y = ev.clientY;
// 获取光标X轴需要移动的距离
var l = x - box.offsetLeft - div.offsetWidth/2 - this.clientLeft;
// 获取光标Y轴需要移动的距离
var t = y - box.offsetTop - div.offsetHeight/2 - this.clientTop;
// 左边缘处理
if(l<=0){
l=0;
}
//右边缘处理
if(l>=box.clientWidth-div.offsetWidth){
l = box.clientWidth-div.offsetWidth;
}
// 上边缘处理
if(t<=0){
t=0;
}
// 下边缘处理
if(t>=box.clientHeight-div.offsetHeight){
t = box.clientHeight-div.offsetHeight;
}
// 动态调整放大镜内部图片的尺寸以及地址
floow.src = src;
floow.style.width = box.offsetWidth+‘px‘;
floow.style.height = box.offsetHeight +‘px‘;
// 延时定时器突出放大镜效果
setTimeout(function(){
// 放大镜内部图片移动距离
floow.style.left = -l +‘px‘;
floow.style.top = -t +‘px‘;
},20);
// 光标移动距离
div.style.left = l + ‘px‘;
div.style.top = t + ‘px‘;
// 动态调整放大镜显示框的地址以及储存
move.src = src;
// 获取放大镜框与放大镜之间的比例 显示放大镜盒子的边长X4 除以放大镜盒子的边长X4；
var num = ((showBox.clientHeight*2)+(showBox.clientWidth*2))/((div.clientHeight*2)+(div.clientWidth*2));
move.style.width = num*box.clientWidth +‘px‘;// 动态设置放大镜盒子内部图片的大小
move.style.height = num*box.clientHeight+‘px‘;// 动态设置放大镜盒子内部图片的大小
move.style.left = -l*num+‘px‘;// 移动放大镜盒子里面图片的位置
move.style.top = -t*num+‘px‘;// 移动放大镜盒子里面图片的位置
}
box.onmouseout = function(){
div.style.display = ‘none‘;
move.src = ‘‘;
}
</script>
</html>
时间： 2024-10-13 12:16:02