溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例為大家分享了js放大鏡效果展示的具體代碼，供大家參考，具體內容如下
具體代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body,div,img{
margin:0;
padding:0;
}
img{
display:block;
border:none;
}
#box{
position:absolute;
top:20px;
left:20px;
width:350px;
height:350px;
box-shadow:3px 3px 10px 0 #111111;
}
#box img{
width:100%;
height:100%;
}
#mark{
display:none;
position:absolute;
top:0;
left:0;
width:175px;
height:175px;
background:#000;
opacity: 0.5;
filter:alpha(opacity=50);
cursor:move;
}
#boxRight{
display:none;
position:absolute;
top:20px;
left:380px;
width:350px;
height:350px;
overflow:hidden;
}
/*我們右側的圖片的大小是需要嚴格計算的:
mark的width是box的width的一半，那么我們的大圖寬度也應該是小圖的二倍
*/
#boxRight img{
position:absolute;
top:0;
left:0;
width:200%;
height:200%;
}
</style>
</head>
<body>
<div id='box'>
<img src="img/iphone.jpg" alt="">
<div id='mark'></div>
</div>
<div id='boxRight'>
<img src="img/iphone_big.jpg" alt="">
</div>
<script>
//放大鏡的原理: 我們的mark橫向是box的一半，縱向也是box的一半，那么右側的大圖橫向（縱向）應該是左側小圖的2倍
var box = document.getElementById('box');
var mark = document.getElementById('mark');
var boxRight = document.getElementById('boxRight');
//設置mark這個盒子
function setPosition(e){
var top = e.clientY - box.offsetTop - (mark.offsetHeight/2);
var left = e.clientX - box.offsetLeft - (mark.offsetWidth/2);
//邊界判斷
var tempL = 0,tempT = 0;
var minL = 0,minT = 0,maxL = box.offsetWidth - mark.offsetWidth,maxT = box.offsetHeight - mark.offsetHeight ;
if(left<minL){
mark.style.left = minL + "px";
tempL = minL;
}else if(left>maxL){
mark.style.left = maxL + "px";
tempL = maxL;
}else{
mark.style.left = left + "px";
tempL = left;
}
if(top<minT){
mark.style.top = minT + "px";
tempT = minT;
}else if(top>maxT){
mark.style.top = maxT + "px";
tempT = maxT;
}else{
mark.style.top = top + "px";
tempT = top;
}
//右側圖片跟著運動:左側移動多少，右側跟著移動他的2倍即可
var oImg = boxRight.getElementsByTagName("img")[0];
oImg.style.left = -tempL*2 + "px";
oImg.style.top = -tempT*2 + "px";
}
box.onmouseenter = function(e){
e = e || window.event;
mark.style.display = "block";
setPosition(e);
boxRight.style.display = "block";
}
box.onmousemove = function(e){
e = e || window.event;
setPosition(e);
}
box.onmouseleave = function(e){
e = e || window.event;
mark.style.display = "none";
boxRight.style.display = "none";
}
</script>
</body>
</html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
