圖片放大鏡註釋詳解

時間 2019-11-09

標籤圖片放大鏡註釋詳解简体版

原文原文鏈接

今天的練習是作一個網購網站常見的圖片詳情介紹的放大鏡效果，簡單來講就是圖片中有對應的區域讓你看到放大後的效果。
關於佈局：就是兩組div，第一組大div放圖片，小的是遮蓋層。第二組是大圖div顯示框，裏面放大張圖片，超過部分隱藏，能夠想象下是透過窗戶看外面，你看到的只是一部分。
思路：就是兩邊的比例，重點，比例，話不說，直接上代碼。html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{margin:0 ; padding:0;}
            #left{width:300px;
                    height:300px;
                    border:1px solid gold;
                    position:relative;
                    float:left;
                    margin-right:20px;
                    left:10px;
                    top:10px;}
            #left img{width:300px;
                        height:300px;}
            #mask{width:90px;
                    height:90px;
                    background:greenyellow;
                    opacity: 0.5;
                    position: absolute;
                    top:0;
                    left:0;
                    display:none;
                    cursor: move;}
            #big{width:600px;
                    height:600px;
                    overflow: hidden;
                    float: left;
                    position:relative;
                    left: 10px;
                    top:10px;
                    display:none;
                    border:1px solid goldenrod;}
            #big img{position: absolute;
                    left:0;
                    top:0;}
            
        </style>
    </head>
    <body>
        <div id="left">
            <img src="img/5-140526101943.jpg" />
            <div id="mask"></div>
        </div>
        <div id="big">
            <img src="img/5-140526101943.jpg" />
        </div>
        <script>
        
         // 左邊遮罩層與左邊顯示框大小的比例對應大圖顯示區與圖片的比例
         
            window.onload = function(){
                var left = document.getElementById("left");
                var mask = document.getElementById("mask");
                var big = document.getElementById("big");
                var bigImg = big.children[0];
                
                //鼠標移入，遮罩層顯示，大圖顯示區顯示
                left.onmouseenter = function(){
                    mask.style.display = big.style.display ='block';
                };
                //鼠標移出，遮罩層隱藏，大圖顯示區隱藏
                left.onmouseleave = function(){
                    mask.style.display= big.style.display = 'none';
                };
                
                //鼠標移動，遮罩層跟隨鼠標，大圖顯示相關內容
                left.onmousemove = function(ev){
                    //兼容IE
                    var ev = ev || event;

//鼠標在遮罩層中居中顯示，鼠標的位置-顯示區到body的距離-遮罩層的一半
//後面是賦值給遮罩層的距離，因此用到減，鼠標位置不變，是遮罩層在變，因此須要用到減,遮罩層往回挪佈局

var l = ev.clientX-this.offsetLeft-mask.offsetWidth/2;
                    var t = ev.clientY-this.offsetTop-mask.offsetHeight/2;
                    //不讓遮罩層出左邊顯示框的範圍
                    if(l<=0){
                        l=0
                    }else if(l>=left.clientWidth - mask.offsetWidth){
                        l = left.clientWidth - mask.offsetWidth
                    }
                    if(t<=0){
                        t=0
                    }else if(t>=left.clientHeight - mask.offsetHeight){
                        t = left.clientHeight - mask.offsetHeight
                    }
                    //比例,將可以移動的距離作比例
                    var percX = l/(this.clientWidth- mask.offsetWidth);
                    var percY = t/(this.clientHeight- mask.offsetHeight);
                    //大圖顯示區
                    
                    bigImg.style.left = -percX*(bigImg.offsetWidth - big.clientWidth)+'px';
                    bigImg.style.top = -percY*(bigImg.offsetHeight - big.clientHeight)+'px';
                    //遮罩層的位置
                    mask.style.left = l +'px';
                    mask.style.top = t +'px';
                };
            };
        </script>
    </body>
</html>

這是作完的效果，我不知怎麼插入圖片文件，建議您能夠本身拿張圖片，修改下地址就行，最好是等寬高的，還有一點就是，若是你覺着遮罩層和顯示區域的圖片差太多，那你就能夠修改下遮罩層的大小就好了。網站

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。