仿京东放大镜效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>放大镜效果</title>
</head>
<style type="text/css">
*{margin: 0;padding: 0}
img{border:none;}
ul{list-style: none;}
.cl{zoom:1;}
.cl::after{content:'';display:block;clear:both;}
#wrap{width: 350px;box-sizing: border-box;margin: 50px}
#imgContainer{width: 350px;height: 350px;box-sizing: border-box;border: 1px solid #000;position: relative;margin-bottom: 5px}
#maskImg{width: 100%;height: 100%;}
#maskTop{width: 100%;height: 100%; position: absolute;left: 0;top: 0;background: #fff;opacity: 0;filter: alpha(opacity=0)}
#mask{position: absolute;left:0;top: 0;width: 100px;height: 100px;background: #ffa;opacity: 0.5;filter: alpha(opacity=50);display: none;}
#maskBig{width: 400px;height: 400px;position: absolute;top: -2px;left: 350px;z-index: 50; border:1px solid #e3e3e3;overflow: hidden;display: none;}
#maskBig img{width: 200%;height: 200%;}
#bigImg{position: absolute;}
#imgList{box-sizing: border-box; width: 350px;height:50px;position: relative;overflow: hidden;}
#imgList div{width: 310px;height: 50px; margin: 0 auto;position: relative;}
#itemList{position: absolute;top: 0;left: 0}
#itemList li {float: left;width: 62px;text-align: center;height: 50px }
#itemList li img{width: 50px;height: 50px;padding: 1px;border: 1px solid #e2e3e3;box-sizing: border-box;}
#imgList a{position: absolute;display: block;width: 15px;height: 50px;box-sizing: border-box;border:1px solid #e3e3e3;line-height: 48px;text-align: center;cursor: pointer;z-index: 20}
.back{left: 0;top: 0;}
.forward{right: 0;top: 0;}
#itemList li .activeImg{border: 2px solid red}
.block{display: block !important}
.none{display: none !important}
</style>
<body>
<div id="wrap">
<div id="imgContainer">
<img id="maskImg"src="picture/2.jpg">
<span id="mask"></span>
<span id="maskTop"></span>
<span id="maskBig">
<img id="loading" src="picture/loading.gif">
<img id="bigImg">
</span>
</div>
<div id="imgList">
<a class="back"><</a>
<a class="forward">></a>
<div>
<ul id="itemList" class="cl">
<li><img class="activeImg" src="picture/2.jpg" /></li>
<li><img src="picture/3.jpg" /></li>
<li><img src="picture/4.jpg" /></li>
<li><img src="picture/5.jpg" /></li>
<li><img src="picture/6.jpg" /></li>
<li><img src="picture/7.jpg" /></li>
<li><img src="picture/8.jpg" /></li>
<li><img src="picture/9.jpg" /></li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
var itemList=document.getElementById("itemList"),
maskImg=document.getElementById("maskImg"),
aLi=itemList.getElementsByTagName("li"),
aImg=itemList.getElementsByTagName("img"),
aA=document.getElementsByTagName("a"),
aUl=document.getElementById("itemList"),
oMaskTop=document.getElementById("maskTop"),
oMask=document.getElementById("mask"),
oMaskBig=document.getElementById("maskBig");
oBigImg=document.getElementById("bigImg"),
oLoad=document.getElementById('loading'),
n=0;
function addEvent(elem,type,hander){
if(elem.addEventListener){
elem.addEventListener(type,hander,false)
}else if(elem.attachEvent){
elem.attachEvent("on"+type,hander)
}else{
elem["on"+type]=hander
}
}
/**
* 鼠标滑动切换展示区
*/
for(var i=0;i<aLi.length;i++){
(function(i){
i.onmouseover=function(){
var activeImg=document.querySelector('.activeImg');
if(activeImg!=this){
activeImg.removeAttribute("class");
this.className="activeImg";
maskImg.src=this.src;
}
}
})(aImg[i])
}
/**
* 初始化
*/
function init(){
aUl.style.width=aLi.length*62+"px"
}
init();
/**
* 略缩图切换
*/
function backChange(){
if(n==0){
return
}else{
n--;
aUl.style.left=-62*n+"px";
}
}
function forwordChange(){
if(n>=aLi.length-5||aLi.length<=5){
return
}else{
n++;
aUl.style.left=-62*n+"px";
}
}
/**
* 放大镜
*/
function maskMove(event){
var event=event||window.event;
x=event.clientX-oMaskTop.getBoundingClientRect().left;
y=event.clientY-oMaskTop.getBoundingClientRect().top;
w=oMask.offsetWidth;
h=oMask.offsetHeight;
lf=x<w/2 ? 0:(x-w/2);
tp=y<h/2 ? 0:(y-h/2);
lf=lf>oMaskTop.offsetWidth-w?(oMaskTop.offsetWidth-w):lf;
tp=tp>oMaskTop.offsetHeight-h?(oMaskTop.offsetHeight-h):tp;
oMask.style.left = lf+'px';
oMask.style.top = tp+'px';
//大图位置
oBigImg.style.left = (-1*lf*oBigImg.width/oMaskTop.offsetWidth) + 'px';
oBigImg.style.top = (-1*tp*oBigImg.height/oMaskTop.offsetHeight)+'px';
}
function maskOver(){
oMask.className="block";
oMaskBig.className="block";
oBigImg.src=maskImg.src;
oBigImg.onload = function(){
oLoad.className = 'none';
this.className = 'block';
}
}
function maskOut(){
oMask.className = 'none';
oMaskBig.className="none";
}
addEvent(aA[0],"click",backChange);
addEvent(aA[1],"click",forwordChange);
addEvent(oMaskTop,"mouseover",maskOver);
addEvent(oMaskTop,"mousemove",maskMove);
addEvent(oMaskTop,"mouseout",maskOut);
</script>
</body>
</html>
