我们平时在浏览商品网站的时候，当鼠标滑过商品的时候，就会在旁边看到该商品对应的放大效果，这样你就能更仔细的对商品进行分析。作为一个前端开发人员，你是不是很好奇这个效果的实现的方法。我本人就是属于，喜欢浏览各种网站，好奇他们的效果实现，了解跟找到解决的方法，不断的学习。
而这个放大镜效果关键在于放大的比例：
放大比例 = 左边盒子的大小 / 里面进行剪切的盒子大小，该比例值作为右边盒子显示内容的大小
代码如下
CSS样式：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body,ul,li{
padding: 0;
margin: 0;
}
li{
list-style: none;
}
img{
display: block;
border: none;
}
#zoomBox{
position: relative;
left: 40px;
top: 40px;
width: 400px;
border: 1px solid #CECECE;
}
#midArea{
width: 400px;
height: 400px;
overflow: hidden;
}
#midArea img{
width: 400px;
height: 400px;
}
#zoom{
display: none;
position: absolute;
width: 200px;
height: 200px;
background: yellow;
opacity: .3;
cursor: move;
}
#bigArea{
display: none;
position: absolute;
left: 400px;
top: -1px;
width: 400px;
height: 400px;
border: 1px solid #CECECE;
overflow: hidden;
}
#bigArea img{
position: absolute;
width: 800px;
height: 800px;
}
#smallArea li{
float: left;
margin: 10px;
width: 50px;
height: 50px;
}
#smallArea li img{
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div id="zoomBox">
<div id="midArea">
<img src="img/m01.jpg">
<div id="zoom"></div>
</div>
<div id="bigArea">
<img src="img/m01.jpg">
</div>
<ul id="smallArea">
<li>
<img src="img/m01.jpg">
</li>
<li>
<img src="img/m02.jpg">
</li>
</ul>
</div>
</body>
</html>
JS代码
function $(id){
return document.getElementById(id);
}
function Zoom(){
this.zoomBox = $("zoomBox");
this.midArea = $("midArea");
this.midImg = this.midArea.children[0];
this.zoom = $("zoom");
this.bigArea = $("bigArea");
this.bigImg = this.bigArea.children[0];
this.smallArea = $("smallArea");
this.smallList = this.smallArea.children;
this.midArea.onmouseover = ()=>{
this.zoom.style.display = "block";
this.bigArea.style.display = "block";
}
this.midArea.onmouseout = ()=>{
this.zoom.style.display = "none";
this.bigArea.style.display = "none";
}
this.midArea.onmousemove = (e)=>{
let evt = e || event;
let x = evt.pageX - this.zoomBox.offsetLeft - this.zoom.offsetWidth/2;
let y = evt.pageY - this.zoomBox.offsetTop - this.zoom.offsetHeight/2;
/*let x = evt.offsetX - this.zoom.offsetWidth/2;
let y = evt.offsetY - this.zoom.offsetHeight/2;*/
let maxW = this.midArea.offsetWidth - this.zoom.offsetWidth;
let maxH = this.midArea.offsetHeight - this.zoom.offsetHeight;
x = x <= 0 ? 0 : x >= maxW ? maxW : x;
y = y <= 0 ? 0 : y >= maxH ? maxH : y;
this.zoom.style.left = x + "px";
this.zoom.style.top = y + "px";
this.bigImg.style.left = - this.zoom.offsetLeft/this.midArea.offsetWidth * this.bigImg.offsetWidth + "px";
this.bigImg.style.top = - this.zoom.offsetTop/this.midArea.offsetHeight * this.bigImg.offsetHeight + "px";
}
for(let i = 0; i < this.smallList.length; i++){
this.smallList[i].onclick = ()=>{
this.midImg.src = this.smallList[i].children[0].src;
this.bigImg.src = this.smallList[i].children[0].src;
}
}
加油哦，马上就是2020年了。人生的又一个新开始。
网友评论