JS放大镜效果~

浏览数：51 / 时间：2015年06月09日

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #box{
            width:375px;
            height:250px;
            border:1px red solid;
            float:left;
            position:relative;
            margin-left:50px;
            margin-top:50px;
        }
        #leftImg{
            width:375px;
            height:250px;
            display:block;
        }
        #drag{
            width:187.5px;
            height:125px;
            background:yellow;
            position:absolute;
            left:0;
            top:0;
            opacity:0.4;
            filter:Alpha(opacity=40);/*解决IE8以下！！！！*/
            cursor:move;
            display:none;
        }
        #rightImg{
            width:750px;
            height:500px;
        }
        #rightShow{
            float:left;
            width:375px;
            height:250px;
            border:1px blue solid;
            overflow:hidden;
            display:none;
            margin-top:50px;
        }
    </style>
</head>
<body>
    <div id="box">
        <img id="leftImg" src="1200.jpg" alt="">
        <div id="drag"></div>
    </div>
    <div id="rightShow">
        <img id="rightImg" src="1200.jpg" alt="">
    </div>
</body>
<script>
    var oBox = document.getElementById(‘box‘);
    var drag = document.getElementById(‘drag‘);
    var rightShow = document.getElementById(‘rightShow‘);

    oBox.onmousemove = function  () {
        var e = event ||window.event;
        drag.style.display=‘block‘;
        rightShow.style.display=‘block‘;
        var lefts = e.clientX - oBox.offsetLeft - drag.offsetWidth/2;
        var tops = e.clientY - oBox.offsetTop - drag.offsetHeight/2;
        var maxWidth = oBox.offsetWidth - drag.offsetWidth;
        var maxHeight = oBox.offsetHeight - drag.offsetHeight;
        if(lefts > maxWidth){
            lefts = maxWidth
        }
        if (tops > maxHeight) {
            tops = maxHeight;
        }
        if (lefts<0) {
            lefts = 0
        }
        if (tops < 0) {
            tops = 0
        }
        drag.style.left = lefts + ‘px‘;
        drag.style.top = tops + ‘px‘;
        var num = rightImg.offsetWidth / leftImg.offsetWidth;
        rightShow.scrollLeft = drag.offsetLeft * num;
        rightShow.scrollTop = drag.offsetTop * num;
    }
    oBox.onmouseout = function(){
        drag.style.display = ‘none‘;
        rightShow.style.display = ‘none‘;
    }
</script>
</html>