前端JS電商放大鏡效果

最後更新：2017-08-23 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：meta rip function top style 電商 javascrip jpg har

前端JS電商放大鏡效果：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>26-電商放大鏡</title>    <style type="text/css">            *{        padding: 0;        margin: 0;    }    #left{      padding: 0;    margin: 0;        width: 400px;        height: 400px;        border: 2px solid blue;        background: url(http://chuantu.biz/t6/17/1503469475x2063891122.jpg) no-repeat;        float: left;        cursor: crosshair;        position: relative;    box-sizing: border-box;    }    #box{        width: 200px;        height: 200px;        background: white;        opacity: 0.6;        position: absolute;        top: 0;        left: 0;        display: none;    box-sizing: border-box;    }    #cover{        width: 400px;        height: 400px;        background: red;        position: absolute;        left: 0;        top: 0;        opacity: 0;    box-sizing: border-box;    }    #right{        width: 400px;        height: 400px;        border: 2px solid black;        overflow: hidden;        position: relative;        display: none;    box-sizing: border-box;    }    #rpic{        position: absolute;    }    </style>    <script type="text/javascript">            window.onload = function(){        var left = document.getElementById("left");        var right = document.getElementById("right");        var rpic = document.getElementById("rpic");        var box = document.getElementById("box");        var cover = document.getElementById("cover");        // 給左側加滑鼠移動事件        cover.onmousemove = function(){            //獲得事件對象            var ev = window.event;            var mouse_left = ev.offsetX || ev.layerX;            var mouse_top = ev.offsetY || ev.layerY;            // document.title = mouse_left + ‘|‘ +  mouse_top;            //計算色塊的位置            var box_left = mouse_left - 100;            var box_top = mouse_top - 100;            // 判斷是否超出            if (box_left < 0) {                box_left = 0;            }            if (box_left > 200) {                box_left = 200;            }            if (box_top < 0) {                box_top = 0;            }            if (box_top > 200) {                box_top = 200;            }            // 讓色塊移動            box.style.left = box_left + ‘px‘;            box.style.top = box_top + ‘px‘;            //計算右側圖片位置            var rpic_left = box_left*-2;            var rpic_top = box_top*-2;            // 讓右側移動            rpic.style.left = rpic_left + ‘px‘;            rpic.style.top = rpic_top + ‘px‘;        }            //給左側加滑鼠移入事件            cover.onmouseover = function(){                // 讓左側色塊和右側隱藏                box.style.display = ‘block‘;                right.style.display = ‘block‘;            }            // 給左側加滑鼠移出事件            cover.onmouseout = function(){                // 讓左側色塊和右側隱藏                box.style.display = ‘none‘;                right.style.display = ‘none‘;            }    }    </script></head><body>    <div id="left">        <div id="box"></div>        <div id="cover"></div>    </div>    <div id="right">        <img src="http://chuantu.biz/t6/17/1503469419x2063891122.jpg" id="rpic">    </div></body></html>

前端JS電商放大鏡效果

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More