1. 程式人生 > >仿淘寶商品放大鏡效果

仿淘寶商品放大鏡效果

效果圖:

 

 

原始碼:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {margin: 0;padding: 0;}
        img {
            vertical-align: top;
        }
        .box {
            width: 350px
; height: 350px; margin:100px; border: 1px solid #ccc; position: relative; } .big { width: 450px; height: 450px; position: absolute; top: 0; left: 360px; border: 1px solid #ccc
; overflow: hidden; display: none; } .mask { width: 100px; height: 100px; background: rgba(255, 255, 0, 0.4); position: absolute; top: 0; left: 0; cursor: move; display: none
; } .small { position: relative; } .big img { position: absolute; top: 0; left: 0; } </style> </head> <body> <div class="box" id="fdj"> <!--小盒子--> <div class="small"> <img src="001.jpg" alt=""/> <div class="mask"></div> </div> <div class="big"> <img src="0001.jpg" alt=""/> </div> </div> </body> </html> <script> var fdj = document.getElementById("fdj"); // 獲得最大的盒子 var small = fdj.children[0]; // 獲得small 小圖片 350盒子 var big = fdj.children[1]; // 獲得 大圖片 800 盒子 var mask = small.children[1]; // 小的黃色盒子 var bigImage = big.children[0]; // 大盒子裡面的圖片 small.onmouseover = function() { // 滑鼠經過顯示出他們 mask.style.display = "block"; big.style.display = "block"; } small.onmouseout = function() { mask.style.display = "none"; big.style.display = "none"; } // 滑鼠在small 內移動 var x = 0; var y = 0; small.onmousemove = function(event) { var event = event || window.event; x = event.clientX - this.offsetParent.offsetLeft - mask.offsetWidth /2; // 再某個盒子內的座標 //alert(this.offsetLeft); y = event.clientY - this.offsetParent.offsetTop - mask.offsetHeight /2; if(x < 0) { x = 0; } else if(x > small.offsetWidth - mask.offsetWidth) { x = small.offsetWidth - mask.offsetWidth; } if(y<0) { y = 0; } else if(y > small.offsetHeight - mask.offsetHeight) { y = small.offsetHeight - mask.offsetHeight; } mask.style.left = x + "px"; mask.style.top = y + "px"; /*計算 : 夫子 一頓吃 2個饅頭 嬌子 一頓 4個饅頭 問 夫子今天吃了 3個饅頭 嬌子應該吃幾個? */ /*計算出他們的倍數 4 / 2 2倍 3 * 2 == 6個 */ /* 大圖盒子 / 小圖盒子 倍數 我們 再小圖移動的距離 * 倍數 == 大圖的位置*/ bigImage.style.left = -x * big.offsetWidth /small.offsetWidth + "px"; bigImage.style.top = -y * big.offsetHeight /small.offsetHeight + "px"; } </script>