技術標籤：jshtmlcsshtmljsjquery

放大鏡效果想必大家並不陌生，在廣泛的應用在各種線上商城的商品展示，那麼今天為大家實現以下放大鏡效果；

CSS樣式：overflow:hidden 溢位隱藏；margin-left，margin-right 左右邊距；

主要事件：滑鼠事件mousemove()和mouseleave();不要忘記引入jQ檔案!

效果圖

1.html程式碼：

 <div id="box">
        <img src="./哈哈.jpg" alt="">//正常顯示的圖片
 

        <div id="xiao"></div>
    </div>
    <div id="box2">
        <img src="./哈哈.jpg" alt="" id="big">//要放大的圖片
    </div>

2.css樣式程式碼：

 <style>
        * {
            margin: 0;
            padding: 0;
        }
 


        #box {
            /* margin: 100px; */
            width: 200px;
            height: 200px;
            border: 1px solid black;
        }

        #box img {
            width: 100%;
            height: 100%;
        }

        #box2 {
            width: 200px;
            height: 200px;
            border:
 
 1px solid black;
            position: absolute;
            top: 0;
            left: 200px;
            overflow: hidden;
        }

        #box2 img {
            width: 400px;
            height: 400px;
            position: absolute;
            /* left:-120px;
            top:-100px */
        }

        #xiao {
            width: 100px;
            height: 100px;
            background: rgba(0, 0, 0, 0.6);
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>

3.jQuery部分：

<script>
        $("#box").on("mousemove", function (event) {
            $("#xiao").show();
            $("#box2").show();
            var mX = event.pageX;
            var mY = event.pageY;
            var xiaoX = mX / 2;
            var xiaoY = mY / 2;
            // 遮罩層 位置
            $("#xiao").css({
                top: xiaoY,
                left: xiaoX
            })
            // 大圖的位置
            $("#big").css({
                top: - xiaoY * 2,
                left: - xiaoX * 2
            })
        }).on("mouseleave", function () {
            $("#xiao").hide();
            $("#box2").hide();
        })
    </script>