原生javascript實現圖片放大鏡效果

時間 2019-12-14

標籤原生 javascript 實現圖片放大鏡效果欄目 JavaScript 简体版

原文原文鏈接

當咱們在電商網站上購買商品時，常常會看到這樣一種效果，當咱們把鼠標放到咱們瀏覽的商品圖片上時，會出現相似放大鏡同樣的必定區域的放大效果，方便消費者觀察商品。今天我對這一技術，進行簡單實現，實現圖片放大鏡效果。
我在代碼中進行了代碼編寫的思路的說明和詳細的代碼註釋，方便讀者，請看代碼：css

  1 <!doctype html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <title>Document</title>
  6         <style type="text/css">
  7             *{margin:0px; padding:0px;}
  8             .small-box {
  9                 width:300px;
 10                 height:300px;
 11                 margin-left:100px;
 12                 margin-top:100px;
 13                 border:1px #ccc solid;
 14                 cursor:move;
 15                 float:left;
 16                 position:relative;
 17             }
 18             .small-box img {
 19                 width:300px;
 20                 height:300px;
 21             }
 22             .tool {
 23                 width:150px;
 24                 height:150px;
 25                 background-color:gold;
 26                 opacity:0.6;
 27                 filter:alpha(opacity=60);
 28                 position:absolute;
 29                 left:0px;
 30                 top:0px;
 31                 display:none;
 32             }
 33             .tool.active {
 34                 display:block;
 35             }
 36             .big-box {
 37                 width:300px;
 38                 height:300px;
 39                 border:1px #ccc solid;
 40                 overflow:hidden;
 41                 float:left;
 42                 margin-top:100px;
 43                 position:relative;
 44                 display:none;
 45             }
 46             .big-box.active {
 47                 display:block;
 48             }
 49             .big-box img {
 50                 width:600px;
 51                 height:600px;
 52                 position:absolute;
 53             }
 54         </style>
 55     </head>
 56     <body>
 57         <div class="small-box" id="smallBox">
 58             <img src="img1.jpg"/>
 59             <div class="tool" id="tool"></div>
 60         </div>
 61         <div class="big-box" id="bigBox">
 62             <img src="img1.jpg" id="bigImg" />
 63         </div>
 64         <script>
 65             /*
 66                 第一步：當頁面加載完後，獲取所要操做的節點對象。
 67                 第二步：爲smallBox添加一個鼠標浮動事件
 68                             當鼠標浮動到smallBox可視區域的時候，顯示出小黃盒子tool
 69                             和右邊的大盒子（小黃盒子的放大版）bigBox
 70                             添加active
 71 
 72                         爲smallBox添加一個鼠標離開事件
 73                             隱藏小黃盒子和右邊的大盒子
 74                             去掉active
 75 
 76                 第三步：爲smallBox添加一個鼠標移動事件
 77                         小黃盒子tool要跟着鼠標的座標移動
 78                         右邊的大盒子裏的圖片也跟着指定的比例移動
 79             */
 80             var smallBox = document.getElementById("smallBox");//小盒子
 81             var tool = document.getElementById("tool");//小盒子中的黃色區域
 82             var bigBox = document.getElementById("bigBox");//大盒子
 83             var bigImg = document.getElementById("bigImg");//放大的圖片
 84             //鼠標進入小盒子區域內，顯示黃色區域和大盒子
 85             smallBox.onmouseenter = function(){
 86                 tool.className = "tool active";
 87                 bigBox.className = "big-box active";
 88             }
 89             //鼠標離開小盒子區域，不顯示黃色區域和大盒子
 90             smallBox.onmouseleave = function(){
 91                 tool.className = "tool";
 92                 bigBox.className = "big-box";
 93             }
 94             //鼠標在小盒子內移動
 95             smallBox.onmousemove = function(e){
 96                 var _e = window.event||e;//事件對象
 97                 var x = _e.clientX-this.offsetLeft-tool.offsetWidth/2;//事件對象在小盒子內的橫向偏移量
 98                 var y = _e.clientY-this.offsetTop-tool.offsetHeight/2;//豎向偏移量
 99                 if(x<0){
100                     x = 0;//當左偏移出小盒子時，設爲0
101                 }
102                 if(y<0){
103                     y = 0;//當上偏移出小盒子時，設爲0
104                 }
105                 if(x>this.offsetWidth-tool.offsetWidth){
106                     x = this.offsetWidth-tool.offsetWidth;//當右偏移出小盒子時，設爲小盒子的寬度-黃色放大區域寬度
107                 }
108                 if(y>this.offsetHeight-tool.offsetHeight){
109                     y = this.offsetHeight-tool.offsetHeight;//當下偏移出小盒子時，設爲小盒子的高度-黃色放大區域高度
110                 }
111                 tool.style.left = x + "px";//黃色放大區域距離小盒子左偏距
112                 tool.style.top = y + "px";//黃色放大區域距離小盒子上偏距
113                 bigImg.style.left = -x*2 + "px";//放大圖片移動方向相反，偏移距離加倍
114                 bigImg.style.top = -y*2 + "px";
115             }
116         </script>
117     </body>
118 </html>

這裏，我並無對代碼中css樣式，JavaScript行爲進行和html結構的分離，方便讀者閱讀和運行。
有讀者可能考慮，獲取事件對象的偏移距離時直接使用offsetX和offsetY屬性，省去了計算，可是筆者在試驗時，出現了異常，黃色放大區域並不能穩定的隨着鼠標進行移動，筆者認爲，當時用offsetX和offsetY時，執行onmousemove會不斷地出發onmouseover，而onmouseover會產生事件傳播，從而致使在獲取offsetX時出現異常。最終，筆者採用上述代碼中的方法，可以出現穩定的效果。讀者能夠自行運行代碼，查看效果。這裏附上筆者的效果圖：html

相關標籤/搜索

每日一句

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