您的位置：首页 > Web前端 > JavaScript

JavaScript 放大镜（商品放大）

2017-09-24 22:12 246 查看

实现购物中放大商品的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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航