JS實現圖片放大鏡
阿新 • • 發佈:2018-12-15
null ava png cli parse off images asc pan
將一個小圖放置在一個小盒子裏,當鼠標在小盒子裏移動時,出現一個移動塊,右側出現一個大盒子,顯示出小盒子中移動塊所在區域的等比例放大的圖片內容。需要實現的效果如下:
基本實現思路為:右側大盒子為一個可視區域,有左側小盒子中的圖片的等比例放大圖片,通過計算圖片需要移動的距離來顯示出想要放大的內容,超出部分設置為隱藏。
HTML和CSS內容如下:
<head> <meta charset="UTF-8"> <title>放大鏡</title> <style type="text/css" media="screen"> img { width: 250px; height: 150px; } #pic_wrap { position: relative; width: 250px; height: 150px;
float: left; } #float_box { width: 100px; height: 100px; background-color: green; filter: opacity(alpha: 30); opacity: 0.3; position: absolute; display: none; } #big_img { background-image: url(images/Layer14.png); height: 450px; width: 750px; background-repeat: no-repeat; background-size: cover; position: relative; } #show { width: 300px; height: 300px;
float: left; background-color: white; opacity: 1; filter: opacity(alpha:1); overflow: hidden; display: none; } </style> </head> <body> <!-- 原始圖片區域 --> <div id="pic_wrap"> <!-- 放大鏡所示區域 --> <div id="float_box"></div> <img src="images/Layer14.png" > </div> <div id="show"> <!-- 預留的放大後的圖片 --> <img src="images/Layer14.png" id="big_img"> </div> </body>
HTML和CSS寫好之後,利用js給放大鏡加交互效果
- 當鼠標移入的時候,放大鏡能夠顯示出來!需要加onmouseover事件。
- 當鼠標沒有移除,且鼠標在圖片內不停地移動, 需要加onmousemove事件。
- 當鼠標完全移除後,需要加onmouseout事件。
- onmouseover事件需要讓放大鏡和可視窗口顯示出來。
- onmousemove事件,讓放大鏡和可視窗口中的圖片同時移動。
- onmouseout時間,讓放大鏡和可是窗口消失!
JS代碼如下:
var pic_wrap = document.getElementById(‘pic_wrap‘), float_box = document.getElementById("float_box"), show = document.getElementById(‘show‘); big_img = document.getElementById("big_img"); //鼠標移入事件,讓放大鏡和放大區顯示! pic_wrap.onmouseover = function() { float_box.style.display = "block"; show.style.display = "block"; } //鼠標不斷移動時觸發,實時更新放大鏡得到的圖片 pic_wrap.onmousemove = function(event) { floatMove(float_box, pic_wrap, event); showPic(); } //鼠標移出後,放大鏡和放大區隱藏 pic_wrap.onmouseout = function() { float_box.style.display = "none"; show.style.display = "none"; } //由於offset方法包括邊框,在使用的時候很容易出現問題,所以用style來實時獲取attr! function getStyle(obj, attr) { if (window.currentStyle) { return parseInt(obj.currentStyle[attr]); } else { return parseInt(getComputedStyle(obj,null)[attr]); } } //運動框架,控制放大鏡在原圖中的位置! function floatMove(argu1, argu2, event) { var e = event ||window.event; var minLeft = getStyle(argu1, "width"); var maxLeft = getStyle(argu2, "width") - minLeft/2; var minHeight = getStyle(argu1, "height"); var maxHeight = getStyle(argu2, "height") - minHeight/2; console.log(maxLeft); console.log(maxLeft - minLeft/2); if (e.clientX < minLeft/2) { float_box.style.left = "0px";//防止放大鏡超出左邊框 } else if (e.clientX > maxLeft) { float_box.style.left = getStyle(argu2, "width") - getStyle(argu1, "width") + "px";//防止放大鏡超出右邊框 } else { float_box.style.left = event.clientX - minLeft/2 + "px"; //放大鏡完全在圖片內時正常移動 } if (e.clientY < minHeight/2) { float_box.style.top = "0px"; //防止放大鏡超出上邊框 } else if (e.clientY > maxHeight) { float_box.style.top = getStyle(argu2, "height") - getStyle(argu1, "height") + "px"; //防止放大鏡超出下邊框 } else { float_box.style.top = event.clientY - minLeft/2 + "px"; } } //用來顯示放大鏡得到的圖片,利用坐標計算!實時更新可視區域 function showPic() { var iCurLeft = getStyle(float_box,"left"); var iCurTop = getStyle(float_box,"top"); var a = getStyle(pic_wrap,"width") - getStyle(float_box,"width"); var b = getStyle(big_img,"width") - getStyle(show,"width"); var moveWidth = -(iCurLeft/a)*b; big_img.style.left = moveWidth + "px"; var c = getStyle(pic_wrap,"height") - getStyle(float_box,"height"); var d = getStyle(big_img,"height") - getStyle(show,"height"); var moveHigth = -(iCurTop/c)*d; big_img.style.top = moveHigth + "px"; }
JS實現圖片放大鏡