放大镜

mumu42

于 2017-08-23 17:11:04 发布

阅读量185

点赞数

分类专栏：经典案例

本文链接：https://blog.csdn.net/mumu42/article/details/77508460

版权

经典案例专栏收录该内容

23 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            margin: 100px;
        }
        .imgbox_s{
            width: 400px;
            height: 600px;
            position: relative;
            float: left;
            overflow: hidden;
        }
        img{
            display: block;
        }
        .imgbox_b{
            width: 400px;
            height: 600px;
            float: left;
            overflow: hidden;
            margin-left: 10px;
            display: none;
        }
        .mask{
            width: 200px;
            height: 200px;
            background: cyan;
            opacity: 0.3;
            filter:alpha(opacity=30);
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="imgbox_s">
            <img src="img/mirror_img_small.jpg" />
            <div class="mask"></div>
        </div>
        <div class="imgbox_b">
            <img src="img/mirror_img_big.jpg" />
        </div>
    </div>
<script type="text/javascript">
    var div=document.getElementsByTagName('div');
    var imgs=document.getElementsByTagName('img')[1];

    div[1].οnmοusemοve=function(event){
        var e=event||window.event;
        div[2].style.display="block";
        div[3].style.display="block";
        var scrollT=document.body.scrollTop||document.documentElement.scrollTop||window.pageYOffset||0;
        var scrollL=document.body.scrollLeft||document.documentElement.scrollLeft||window.pageXOffset||0;
        scrollT=scrollT+div[1].offsetTop;
        scrollL=scrollL+div[1].offsetLeft;
        var x=e.clientX-scrollL-div[2].offsetWidth/2;
        var y=e.clientY-scrollT-div[2].offsetHeight/2;

        if(x<0){
            x=0;
        }
        if(y<0){
            y=0;
        }
        if(x>div[1].offsetWidth-div[2].offsetWidth){
            x=div[1].offsetWidth-div[2].offsetWidth;
        }
        if(y>div[1].offsetHeight-div[2].offsetHeight){
            y=div[1].offsetHeight-div[2].offsetHeight;
        }
        div[2].style.left=x+"px";
        div[2].style.top=y+"px";
        var percenX=div[2].offsetLeft/div[1].offsetWidth;
        var percenY=div[2].offsetTop/div[1].offsetHeight;
        imgs.style.marginLeft=-percenX*imgs.offsetWidth+"px";
        imgs.style.marginTop=-percenY*imgs.offsetHeight+"px";
    }
    div[1].οnmοuseleave=function(){
        div[2].style.display="none";
        div[3].style.display="none";
    }
</script>
</body>
</html>

mumu42

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
放大镜

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; *{ margin: 0;
复制链接

扫一扫

专栏目录