仿京东放大镜效果

<!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">&lt;</a>
                <a class="forward">&gt;</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>

posted @ 2017-10-10 17:06  humility  阅读(214)  评论(1)    收藏  举报