js放大鏡特效

　　在平時網上商城購物時，我們能夠通過放大鏡效果來使我們看圖片能夠更加的清楚，今天我就來給大家分享一下我學習的放大鏡特效

　　下圖是原圖的樣子                                                              下圖是滑鼠放上去的效果

　　接下來我們就看一看放大鏡效果是如何實現的

　　1.首先我們還是先把div佈局寫出來

<div class="bfdj">
    <div id="box">
        <div id="bug1">
            <img src="../img/b2.jpg" alt="" id="bug">
            <div id="ball"></div>
            <div id="mask"></div>
        </div>

        <div id="bug2">
            <img src="../img/b2.jpg" id="pic">
        </div>
    </div>
    <!--小圖片五張-->
    <div id="bimg">
        <div id="imgs">
            <img src="../img/b2.jpg" alt="" id="img1">
            <img src="../img/bbbb.jpg" alt="" id="img2">
            <img src="../img/bbbb1.jpg" alt="" id="img3">
            <img src="../img/bbbb2.jpg" alt="" id="img4">
            <img src="../img/bbbb3.jpg" alt="" id="img5">
        </div>
    </div>
</div>

<script src="../js/bf.js"></script>

　　2.其次是css部分

/*放大鏡*/
*{
    margin: 0;
    padding: 0;
}
.bfdj{
    width: 100%;
    height: 570px;
    /**/
}
#box{
    width: 375px;
    height: 350px;
    position: relative;
    margin-left: 300px;
    top:100px;
    /*right: ;*/
    /**/
}
#bug1{
    width: 376px;
    height: 350px;
    border: 1px solid gainsboro;
    position: relative;
    display: inline-block;
    /*margin-left: 200px;*/
    /**/
}
/*.box-right{*/
    /*position: absolute;*/
    /*float: right;*/
    /**/
    /*margin-left: 680px;*/
    /*margin-top: -250px;*/
    /*width: 600px;*/
    /*height: 425px;*/
    /*font-size: 16px;*/
    /*font-family: 微軟雅黑;*/
    /*border: 1px solid lightgrey;*/
    /*background-image: url("../img/bhh.jpg");*/
/*}*/
#bug1 img{
    width: 100%;
    height: 100%;
    display: block;
}
#ball{
    width: 150px;
    height: 150px;
    position: absolute;
    top:0;
    left: 0;
    background-color: navajowhite;
    opacity: 0.3;
    /*display: none;*/
}
#mask{
    width:100%;
    height: 100%;
    position: absolute;
    top:0;
    left: 0;
    z-index: 5;
    cursor: pointer;
}
#bimg{
    position: relative;
    margin-left: 300px;
    margin-top: 100px;
}
#imgs img{
    width: 70px;
    height: 70px;
    float: left;
    border: 2px solid transparent;
    margin-left: 2px;
    margin-top: 2px;
    position: relative;
    /*margin-left: 400px;*/

}
#imgs img:first-child{
    margin-left: 0;
}
#imgs img:hover{
    border: 2px solid gray;
}

#bug2{
    /**/
    width: 376px;
    height: 350px;
    position: relative;
    top:-355px;
    left: 1px;
    overflow: hidden;
    display: none;
    z-index: 4;
}
#bug2 img{
    width: 400%;
    height: 400%;
    display: block;
    border: none;
    position: absolute;
    z-index: 2;
}

　　3.最後是js部分代碼

        //放大鏡
        var bug = document.getElementById("bug");
        var img1= document.getElementById("img1")
        var img2= document.getElementById("img2")
        var img3= document.getElementById("img3")
        var img4= document.getElementById("img4")
        var img5= document.getElementById("img5")

        img1.addEventListener("mousemove",function () {
            bug.src="../img/b2.jpg"
        })
        img2.addEventListener("mousemove",function () {
            bug.src="../img/bbbb.jpg"
        })
        img3.addEventListener("mousemove",function () {
            bug.src="../img/bbbb1.jpg"
        })
        img4.addEventListener("mousemove",function () {
            bug.src="../img/bbbb2.jpg"
        })
        img5.addEventListener("mousemove",function () {
            bug.src="../img/bbbb3.jpg"
        })

        var bug1 = document.getElementById("bug1");
        var ball = document.getElementById("ball");
        var bug2= document.getElementById("bug2");
        var rightImg = document.getElementById("pic");

        img1.addEventListener("mousemove",function () {
            rightImg.src="../img/b2.jpg"
        })
        img2.addEventListener("mousemove",function () {
            rightImg.src="../img/bbbb.jpg"
        })
        img3.addEventListener("mousemove",function () {
            rightImg.src="../img/bbbb1.jpg"
        })
        img4.addEventListener("mousemove",function () {
            rightImg.src="../img/bbbb2.jpg"
        })
        img5.addEventListener("mousemove",function () {
            rightImg.src="../img/bbbb3.jpg"
        })
        bug1.onmousemove =function (event) {
                var e = event || window.event; //獲取滑鼠對象
                ball.style.display="block";
                bug2.style.display="block";
                //滑鼠居中
                var x = (e.offsetX || e.layerX) - ball.offsetWidth/2//offsetWidth獲取 ball的寬度
                var y = (e.offsetY || e.layerY) - ball.offsetHeight/2
                if(x<=0){
                    x=0;
                }else if(x>box.clientWidth-ball.offsetWidth){
                    x=box.clientWidth-ball.offsetWidth
                }
                if(y<=0){
                    y=0;
                }else if(y>box.clientHeight-ball.offsetHeight){
                    y=box.clientHeight-ball.offsetHeight
                }
                ball.style.left=x+"px";
                ball.style.top=y+"px";
        //四倍大小
                rightImg.style.left= x*-4 +"px"
                rightImg.style.top= y*-4 +"px";


                this.onmouseout =function () {
                    ball.style.display="none";
                    bug2.style.display="none";
                }
            }