原生js淘宝放大镜效果(第二版)
随便写写
<!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 wrapleft=document.getElementById("wrapleft");
var wrapright=document.getElementById("wrapright");
var MoverGlass=document.getElementById("MoverGlass");
var bigg=document.getElementById("bigg");
var biggimg=bigg.getElementsByTagName("img")[0];
var smallg=document.getElementsByClassName('smallg');
var Myeye=document.getElementById("Myeye");
for(var i=0;i<smallg.length;i++){
(function(index){
smallg[index].addEventListener("mouseover",function(){
src=smallg[index].getElementsByTagName("img")[0].src;
biggimg.src=src;
Myeye.src=src;
},false)
})(i)
}
bigg.addEventListener("mouseover",function(){
MoverGlass.style.display="block";
wrapright.style.display="block";
},false)
bigg.addEventListener("mouseout",function(){
MoverGlass.style.display="none";
wrapright.style.display="none";
},false)
bigg.addEventListener("mousemove",function(e){
var event=e||window.event;
var scrollTop=document.documentElement.scrollTop||window.pageYOffset||document.body.scrollTop;
var scrollLeft=document.documentElement.scrollLeft||window.pageXOffset||document.body.scrollLeft;
var x=event.clientX;
var y=event.clientY;
var X=x-wrapleft.offsetLeft+scrollLeft-MoverGlass.offsetWidth/2;
var Y=y-wrapleft.offsetTop+scrollTop-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";
Myeye.style.left=-X/bigg.offsetWidth*Myeye.offsetWidth+"px";
Myeye.style.top=-Y/bigg.offsetHeight*Myeye.offsetHeight+"px";
},false)
</script>
