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實現圖片放大鏡