京東放大鏡效果


京東放大鏡效果


這里寫圖片描述

實現放大鏡主要知識點

  • javascript中DOM操作。
  • javascript中時間的獲取,主要有mouseenter、mouseleave、以及當鼠標在照片上移動的時候onmousemove事件以及其中的事件對象中的屬性clientY,clientX,還有獲取元素寬度offsetWidth、offsetHight等。
  • 這里面好考慮到絕對定位,以及放大倍率的計算,里面用到的倍率計算公式(小框里面的放大區域面積/小框面積)=(大框的面積/大筐里的大照片的面積)//大照片的原理是將其放在大框里,將大框的css樣式設置為overflow:hidden,這樣可以將你小筐里的區域按比例顯示在大框里面。

具體代碼實現情況如下

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>放大鏡</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}

#small{
float: left;
width:450px;
height:450px;
border: 1px solid black;
margin-left: 100px;
position:absolute;
}

#big{
float: left;
width:600px;
height:600px;
overflow: hidden;
border: 1px solid black;
position: absolute;
left:600px;
top: 0px;
}

#magnifying{
width: 200px;
height:200px;
background-color: cornflowerblue;
opacity: 0.4;
left: 0px;
top: 0px;
position: absolute;
}

#bigImg{
position: absolute;
width: 1350px;
height:1350px;
}

</style>
</head>
<body>
<div id="small">
<img src="img/1.png" />//記得將其設置與小框大小一致
<div id="magnifying"></div>
</div>
<div id="big">
<img src="img/2.jpg" id="bigImg" />
</div>
<script type="text/javascript">
var small=document.getElementById("small");
var magnifying=document.getElementById("magnifying");
var big=document.getElementById("big");
var bigImg=document.getElementById("bigImg");

small.onmouseenter=function(){
magnifying.style.display="block";
bigImg.style.display="block"
}
small.onmouseleave=function(){
magnifying.style.display="none";
bigImg.style.display="none";
}
small.onmousemove=function(event){
var left=event.clientX-small.offsetLeft-magnifying.offsetWidth/2;
var top=event.clientY-small.offsetTop-magnifying.offsetHeight/2;
var leftMax=small.offsetWidth-magnifying.offsetWidth;
var topMax=small.offsetHeight-magnifying.offsetHeight;
//限制鼠標移動的區域
left = left<=0 ? 0 : left;
top = top <=0? 0:top;
//限制右邊界與下邊界
left =left>=leftMax?leftMax:left;
top =top>=topMax?topMax:top;

magnifying.style.left=left+"px";
magnifying.style.top=top+"px";
//核心代碼
var imgLef=-left/leftMax *(bigImg.offsetWidth-big.offsetWidth);
var imgTop=-top/topMax * (bigImg.offsetHeight-big.offsetHeight);
bigImg.style.left=imgLef+"px";
bigImg.style.top=imgTop+"px";
}

</script>
</body>
</html>

這樣就可以實現放大效果啦,希望這些能對對大家有所幫助。


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
  © 2014-2022 ITdaan.com 联系我们: