js放大镜效果

标签：one   get   img   idt   多少   max   nts   tle   情况   

<script>

    var box = document.getElementById("box");
    var mark = document.getElementById("mark");
    var boxRight = document.getElementById("boxRight");
    function setPosition(e) {
        var tempL= 0,tempT=0;
        //正常情况下我们获取top和left
        var top = e.clientY - box.offsetTop - (mark.offsetHeight / 2);
        var left = e.clientX - box.offsetLeft - (mark.offsetWidth / 2);
        //需要做边界判断
        var minL = 0, minT = 0, maxL = box.offsetWidth - mark.offsetWidth, maxT = box.offsetHeight - mark.offsetHeight;
        if (left < minL) {
            mark.style.left = minL + ‘px‘;
            tempL=minL;
        } else if (left > maxL) {
            mark.style.left = maxL + ‘px‘;
            tempL=maxL;
        } else {
            mark.style.left = left + ‘px‘;
            tempL=left;
        }
        if (top < minT) {
            mark.style.top = minT + ‘px‘;
            tempT=minT;
        } else if (top > maxT) {
            mark.style.top = maxT + ‘px‘;
            tempT=maxT;
        } else {
            mark.style.top = top + ‘px‘;
            tempT=top;
        }
        //让右侧图片跟着运动,左侧移动多少,右侧移动2倍
        var oImg=boxRight.getElementsByTagName("img")[0];
        oImg.style.left=-tempL*2+"px";
        oImg.style.top=-tempT*2+"px";
    }
    box.onmouseenter = function (e) {
        e = e || window.event;
        mark.style.display = "block";
        boxRight.style.display = "block";
        setPosition(e);
    }
    box.onmousemove = function (e) {
        e = e || window.event;
        mark.style.display = "block";
        setPosition(e);
    }
    box.onmouseleave = function (e) {
        e = e || window.event;
        mark.style.display = "none";
        boxRight.style.display = "none";
    }
</script>

js放大镜效果

标签：one   get   img   idt   多少   max   nts   tle   情况   

原文地址：http://www.cnblogs.com/xiaodaxia/p/6684474.html