JavaScript 放大镜（商品放大）

来源：互联网发布：mac appstore 更新不编辑：程序博客网时间：2024/06/08 12:09

实现购物中放大商品的js实现，需要用到两个图片代码如下

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}#small{position: relative;}#box{width:350px;height: 350px;margin-left: 60px;border: 1px solid black;margin-top: 50px;position: relative;}#big{display:none;width: 450px;height: 450px;position: absolute;top: 0;left: 360px;border: 1px solid darkblue;overflow: hidden;}    #mask {display:none;width: 100px;height: 100px;background: rgba(255, 255, 0, 0.4);position: absolute;top: 0;left: 0;cursor: move;}    #big img{display: block;position: absolute;top: 0;left: 0;}</style></head><body><div class="box" id="box"><div id="small"><img src="img/001.jpg"/><div id="mask"></div></div><div id="big"><img src="img/0001.jpg"/></div></div></body></html><script type="text/javascript">var box = document.getElementById("box");var small = document.getElementById("small");var big = document.getElementById("big");var mask= document.getElementById("mask");var bigImg = big.children[0];var leaderx = 0,leadery = 0;var targetx = 0,targety = 0;box.onmouseover = function(){mask.style.display = "block";big.style.display = "block";}box.onmouseout = function(){mask.style.display = "none";big.style.display = "none";}box.onmousemove = function(event){var event = event|| window.event;targetx = event.clientX - mask.offsetWidth;targety = event.clientY- mask.offsetWidth;setInterval(function(){leaderx = leaderx + (targetx - leaderx )/10;leadery = leadery + (targety - leadery )/10;if(leaderx < 0)         {             leaderx = 0;         }         else if(leaderx > small.offsetWidth - mask.offsetWidth)         {             leaderx = small.offsetWidth - mask.offsetWidth;         }         if(leadery<0)         {            leadery = 0;         }         else if(leadery > small.offsetHeight - mask.offsetHeight)         {             leadery = small.offsetHeight - mask.offsetHeight;         }mask.style.left = leaderx + "px";mask.style.top = leadery + "px";  bigImg.style.left =  -leaderx *  (big.offsetWidth /small.offsetWidth) + "px";         bigImg.style.top =  -leadery *  (big.offsetHeight /small.offsetHeight) + "px";},30);}</script>

以下图片分别为：0001.jpg 和001.jpg

阅读全文

0 0