JavaScript之圖片操作5
阿新 • • 發佈：2018-08-29
移動 asc scrip left device 詳細介紹 div com mage
本次的圖片操作是要實現模仿天貓淘寶的放大鏡效果，如下圖所示：
其實現原理其實很簡單，主要就是定位的運用，在上面的圖中，左邊是一個div，它的大小就是左邊圖片的大小，我們稱為左窗口（原圖），紅色部分我們稱為放大鏡，右邊也是一個div，我們稱為右窗口，在右窗口中有一個大圖，要實現放大效果，就需要保證原圖/放大鏡 = 大圖 / 右窗口 = 放大倍率。當鼠標在左圖中移動時，讓放大鏡跟隨鼠標一起移動，然後大圖在又窗口中同步運動，這樣就可以模擬放大效果了。
首先是基本的結果：
<body> <div id="box"> <img src="img/small.jpg"/> <div id="small"></div> </div> <div id="big"> <img src="img/big.jpg" id="imgs"/> </div> </body>
然後是基本樣式：
html,body { margin: 0; padding:0; } /* 小圖 */ #box{ width: 310px; height: 310px; position: relative; float:left; } #box img{ width:100%; height:100%; } /* 紅色方塊 */ #box #small{ width: 100px; height: 100px; position: absolute; top: 0; left: 0; background: red; opacity: 0.6; display: none; } /* 放大圖的盒子 */ #big{ width: 310px; height: 310px; overflow: hidden; position: relative; display: none; float:left; } /* 大圖 */ #big img{ width: 930px; height: 930px; position: absolute; }
這裏為了簡單操作，我們將右窗口設置成和原圖也就是左窗口同樣大小。
通過上面我們知道，大圖是右窗口的3倍，所以是放大了3倍，而且放大鏡是原圖的三分之一。
接下來需要設置在鼠標沒有懸浮在左窗口時，放大鏡、右窗口和原圖是不可見的，只有當鼠標懸浮在左窗口之上時，放大鏡、右窗口和原圖是可見的。
box.onmouseenter = function(e){ big.style.display=‘block‘; small.style.display=‘block‘; } box.onmouseleave = function(e){ big.style.display=‘none‘; small.style.display=‘none‘; }
最後就是監聽鼠標事件，實現放大效果了。
box.onmousemove = function(e){ //獲取鼠標的x、y坐標。為了讓鼠標剛好在small紅色小方塊的中心，所以需要減去50 var top = e.clientY-50; var left = e.clientX-50; //限制small小方塊移出box的範圍 if(top > 200){top = 200}; if(top < 0){top = 0}; if(left > 200){left = 200}; if(left < 0){left = 0}; //動態設置small小方塊的位置，讓小方塊跟隨鼠標移動 small.style.left = left + ‘px‘; small.style.top = top + ‘px‘; //讓big裏面的圖片跟隨鼠標的移動而移動。這裏為什麽要乘以（-3）呢？因為big裏面的大圖是box的3倍。鼠標在box上面向右移動1px，那麽big裏面的大圖就要向左移動(1 x -3)px才能達到我們想要的效果。 img.style.top = top*(-3) + ‘px‘; img.style.left = left*(-3) + ‘px‘; }
這樣，就可以實現放大鏡效果了。
詳細代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="box"> <img src="img/small.jpg"/> <div id="small"></div> </div> <div id="big"> <img src="img/big.jpg" id="imgs"/> </div> </body> <script> var box = document.querySelector(‘#box‘); var small = document.querySelector(‘#small‘); var big = document.querySelector(‘#big‘); var img = document.querySelector(‘#imgs‘); box.onmousemove = function(e){ var top = e.clientY-50; var left = e.clientX-50; if(top > 200){top = 200}; if(top < 0){top = 0}; if(left > 200){left = 200}; if(left < 0){left = 0}; small.style.left = left + ‘px‘; small.style.top = top + ‘px‘; img.style.top = top*(-3) + ‘px‘; img.style.left = left*(-3) + ‘px‘; } box.onmouseenter = function(e){ big.style.display=‘block‘; small.style.display=‘block‘; } box.onmouseleave = function(e){ big.style.display=‘none‘; small.style.display=‘none‘; } </script> </html>
jQuery也可以實現上面的效果，原理是一樣，基於鼠標事件和定位，這裏就不再詳細介紹了，會在代碼下載鏈接中給出詳細完整的代碼。
完整代碼下載：點這裏
JavaScript之圖片操作5