如何做出京東商品詳情的放大鏡效果
- php中世界最好的语言原創
- 2018-03-14 14:48:022569瀏覽
京東放大鏡效果
實作放大鏡主要知識點
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>
<p id="small">
<img src="img/1.png" / alt="如何做出京東商品詳情的放大鏡效果" >//记得将其设置与小框大小一致 <p id="magnifying"></p>
</p>
<p id="big">
<img src="img/2.jpg" id="bigImg" / alt="如何做出京東商品詳情的放大鏡效果" >
</p>
<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>這樣就可以實現放大效果啦，希望這些能對對大家有幫助。
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是如何做出京東商品詳情的放大鏡效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn