大家经常去淘宝买东西会发现,淘宝上的放大镜效果挺有意思的,这里简单的实现了下,代码中的图片地址 亲们可以自行更换;
<!DOCTYPE html>
<html>
<head>
<title>放大镜</title>
<meta charset="utf-8" />
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
height: 2000px;
}
#wrapleft{
width: 300px;
height: 400px;
background: skyblue;
box-shadow: 2px 2px 2px 2px gray;
position: absolute;
left: 100px;
top: 100px;
}
.smallg{
width: 70px;
height: 99px;
float: left;
margin-left: 5px;
}
.smallg img{
width: 70px;
height: 99px;
}
.smallg:hover{
box-shadow: 2px 2px 2px 2px gray;
}
#bigg{
width: 300px;
height: 300px;
position: relative;
}
#bigg img{
width: 300px;
height: 300px;
}
#MoverGlass{
width: 100px;
height: 100px;
position: absolute;
background-color: rgba(0,0,0,0.5);
left: 0;
top: 0;
display: none;
}
#wrapright{
width: 400px;
height: 400px;
position: absolute;
display: none;
background-color: yellowgreen;
left: 420px;
top: 100px;
overflow: hidden;
}
#Myeye{
width: 1200px;
height: 1200px;
position: absolute;
left: 0;
top: 0;
display: block;
}
</style>
</head>
<body>
<div id="wrapleft">
<div id="bigg">
<img src="https://img.alicdn.com/imgextra/i1/5/TB2JKUbpVXXXXacXXXXXXXXXXXX_!!5-0-yamato.jpg_210x1000q90.jpg">
<div id="MoverGlass">
</div>
</div>
<div class="smallg"><img src="https://img.alicdn.com/imgextra/i1/5/TB2JKUbpVXXXXacXXXXXXXXXXXX_!!5-0-yamato.jpg_210x1000q90.jpg"></div>
<div class="smallg"><img src="https://gd1.alicdn.com/imgextra/i1/2621336145/TB2Vc3ogFXXXXX9XXXXXXXXXXXX_!!2621336145.jpg"></div>
<div class="smallg"><img src="https://img.alicdn.com/imgextra/i1/2621336145/TB22k_8gFXXXXXeXpXXXXXXXXXX_!!2621336145.jpg"></div>
<div class="smallg"><img src="https://img.alicdn.com/imgextra/i2/2621336145/TB2YSDHlpXXXXarXXXXXXXXXXXX_!!2621336145.jpg"></div>
</div>
<div id="wrapright">
<img src="ihttps://img.alicdn.com/imgextra/i1/5/TB2JKUbpVXXXXacXXXXXXXXXXXX_!!5-0-yamato.jpg_210x1000q90.jpg" id="Myeye">
</div>
</body>
</html>
<script type="text/javascript">
var smallg=document.getElementsByClassName(‘smallg‘);
var MoverGlass=document.getElementById(‘MoverGlass‘);
var bigg=document.getElementById("bigg");
var biggimg=bigg.getElementsByTagName(‘img‘)[0];
var wrapleft=document.getElementById("wrapleft");
var wrapright=document.getElementById("wrapright");
var Myeye=document.getElementById("Myeye");//小图切换
for(var i=0;i<smallg.length;i++){
smallg[i].index=i;
smallg[i].onmouseover=function (){
src=this.getElementsByTagName("img")[0].src;
biggimg.src=src;
Myeye.src=src;
}
}//遮罩层和显示层的显示与否
bigg.onmouseover=function(){
MoverGlass.style.display="block";
wrapright.style.display="block";
}
bigg.onmouseout=function(){
MoverGlass.style.display="none";
wrapright.style.display="none";
}//遮罩层运动
bigg.onmousemove=function(evt){
var evt=event||evt;
var scrollTop=document.documentElement.scrollTop||window.pageYOffset||document.body.scrollTop;
var scrollLeft=document.documentElement.scrollLeft||window.pageXOffset||document.body.scrollLeft;
var x=evt.clientX+scrollLeft-wrapleft.offsetLeft-MoverGlass.offsetWidth/2;
var y=evt.clientY+scrollTop-wrapleft.offsetTop-MoverGlass.offsetHeight/2;
if(x<=0){
x=0;
}
if(x>=bigg.offsetWidth-MoverGlass.offsetWidth){
x=bigg.offsetWidth-MoverGlass.offsetWidth;
}
if(y<=0){
y=0;
}
if(y>=bigg.offsetHeight-MoverGlass.offsetHeight){
y=bigg.offsetHeight-MoverGlass.offsetHeight;
}
MoverGlass.style.left=x+"px";
MoverGlass.style.top=y+"px";//计算显示层坐标
var b=MoverGlass.offsetLeft/MoverGlass.offsetWidth*wrapright.offsetWidth;
var a=MoverGlass.offsetTop/MoverGlass.offsetHeight*wrapright.offsetHeight;
Myeye.style.left=-b+"px";
Myeye.style.top=-a+"px";
}
</script>
时间： 2024-12-05 12:22:59