20150620仿淘宝图片放大镜

最新推荐文章于 2019-09-19 11:19:14 发布

转载最新推荐文章于 2019-09-19 11:19:14 发布 · 73 阅读

本内容遵循CC 4.0 BY-SA版权协议

原文链接：http://www.cnblogs.com/wz0107/p/4590458.html

ps:img图片放正方形的图片，注意小图和大图

html=========

<div id="div" class="demo">
    <div id="small_pic">
        <span id="float_layer"></span>
        <img id='pic1' src="images/small.jpg" alt="放大镜图片一"/>
    </div>
    <div id="big_pic">
        <img id='pic2' src="images/big.jpg" alt="放大镜图片二"/>
    </div>
</div>

css==========

*{margin: 0;padding: 0;}
#div{width: 350px;height: 350px;margin: 30px auto;position: relative;}
#small_pic{width: 350px;height: 350px;position: relative;}
#float_layer{width: 100px;height: 100px;background: #fff;opacity:0.3;position: absolute;left: 0;top: 0;display: none;}
#big_pic{position: absolute;left: 360px;top: -1px;width: 250px;height: 250px;overflow: hidden;display: none;border:2px solid #ccc;}
#big_pic img{position: absolute;}


js===========

function getClass(className) {
    var tags=document.getElementsByTagName('*');
    var arr=[];
    for (var i = 0; i < tags.length; i++) {
        if(tags[i].className.match(new RegExp("(\\s+|^)"+className+"(\\s+|$)"))){
            arr.push(tags[i]);
        }
    }
    return arr;
}
var small=document.getElementById('small_pic');
var big=document.getElementById('big_pic');
var pic1=document.getElementById('pic1');
var pic2=document.getElementById('pic2');
var float_layer=document.getElementById('float_layer');
var div=document.getElementById('div');
small.onmousemove=function (e) {
    var e=e||window.e;
    this.style.cursor='move';
    float_layer.style.display=big.style.display='block';
    var left=e.clientX-div.offsetLeft-float_layer.clientWidth/2;
    var top=e.clientY-div.offsetTop-float_layer.clientHeight/2;
    if(left<0){
        left=0;
    }else if(left>div.clientWidth-float_layer.clientWidth){
        left=div.clientWidth-float_layer.clientWidth;
    }
    if(top<0){
        top=0;
    }else if(top>div.clientHeight-float_layer.clientHeight){
        top=div.clientHeight-float_layer.clientHeight;
    }
    float_layer.style.left=left+'px';
    float_layer.style.top=top+'px';
    var scaleX=left/(div.clientWidth-float_layer.clientWidth);
    var scaleY=top/(div.clientHeight-float_layer.clientHeight);
    console.log(scaleX);
    pic2.style.left=-scaleX*(pic2.clientWidth-250)+'px';

    pic2.style.top=-scaleY*(pic2.clientHeight-250)+'px';
}
small.onmouseout=function () {
    float_layer.style.display=big.style.display='none';
}