放大镜功能 JS原生写法

 

********** 希望对大家帮助 我会继续努力的 如果有不对的地方请大家帮忙指出******

1 【JS 代码】

<script>

    var oBox = document.getElementById("box");
    var bigBox = document.getElementById("bigBox");
    var img = bigBox.getElementsByTagName("img")[0];
    var mark;
    // 分别给元素的鼠标进入，滑动，滑出绑定方法；
    // 1. 鼠标滑入； 1) ：创建出小盒子  2) : bigBox 显示；
    oBox.onmouseenter = function () {
        var smallBox = document.createElement("div");
        smallBox.id = "mark";
        this.appendChild(smallBox); // 需要放入DOM中，才能用document去获取元素；否则当前节点是获取不到的；
        mark = document.getElementById("mark");
        // 让大盒子显示
        bigBox.style.display = "block";
    }
    oBox.onmousemove = function (e) {
        // 计算小盒子的位置；大盒子图片的位置
        e = e || window.event;
        var minL = 0;
        var maxL = box.offsetWidth/2;
        var left = e.clientX - box.offsetLeft - mark.offsetWidth/2;
        var top = e.clientY- box.offsetTop - mark.offsetHeight/2;
        // 如果left比最小值还小，那么直接让left等于最小值即可；如果left比最大值还大，那么直接设置成最大值；
        if(left<minL){
            left = minL;
        }else if(left>maxL){
            left=maxL;
        }
        if(top<minL){
            top = minL;
        }else if(top>maxL){
            top = maxL;
        }
        // 设置盒子的left、top；
        mark.style.left = left + "px";
        mark.style.top = top + "px";
        // mark 的left和img的left存在2倍关系；
        img.style.left = -2*left + "px";
        img.style.top = -2*top + "px";
    }
    oBox.onmouseleave = function () {
        // 鼠标离开，移出mark;并且让大盒子隐藏；
        this.removeChild(mark);
        bigBox.style.display= "none";
    }


</script>

2 【HTNL部分】

<div id="box">
    <img src="img/iphone.jpg" alt="">
</div>
<div id="bigBox">
    <img src="img/iphone_big.jpg" alt="">
</div>

3【CSS部分】

<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    #box{
        position: relative;
        width:350px;
        height:350px;
        border: 1px solid black;
        margin-top:30px;
        margin-left:50px;
        float:left;
    }
    #box img{
        width:100%;
        height:100%;
    }
    #bigBox{
        display: none;
        position: relative;
        width:350px;
        height:350px;
        border: 1px solid black;
        margin-top:30px;
        margin-left:50px;
        float: left;
        overflow: hidden;
    }
    #bigBox img{
        position: absolute;
        width:700px;
        height:700px;
    }
    #mark{
        position: absolute;
        width:175px;
        height:175px;
        background: rgba(0,0,0,0.3);
        cursor: move;
        left:0;
        top:0;
    }
</style>