您的位置：首页 > Web前端 > JavaScript
Javascript手把手教你做商品放大镜效果

2017-07-03 11:13 531 查看
<!DOCTYPE html>
<html>
<!--放大镜的原理是设置两张图片一张正常 一张放大后的
放大后的设为隐藏 鼠标移入时候显示 然后在正常那边有一个小框
鼠标移动时候移动小框 然后拿小框left/top除以图片的宽/高
得到一个比值,拿比值去乘以大图片的宽/高
就可以得到大图片要移动的距离-->
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}

.wrap {
width: 650px;
height: 432px;
position: relative;
}

.box {
position: relative;
width: 650px;
height: 432px;
}

.box img {
width: 650px;
height: 432px;
}

.bigImg {
width: 650px;
height: 432px;
overflow: hidden;
position: absolute;
top: 0;
left: 660px;
display: none;
}

.bigImg img {
position: absolute;
width: 1300px;
height: 864px;
}

.moveBox {
display: none;
position: absolute;
width: 325px;
height: 216px;
top: 0;
left: 0;
background: rgba(255, 0, 255, 0.3);
}
</style>
</head>

<body>
<div class="wrap">
<div class="box">
<img src="timg.jpg" alt="" />
<div class="moveBox"></div>
</div>
<div class="bigImg">
<img src="timg.jpg" alt="" />
</div>
</div>
</body>
<script>
//布局的话就是需要准备两张图片 一张正常 一张是放大后的;
//      获取放图片的框框
var box = document.getElementsByClassName('box')[0];
//      获取移动的红色小框框
var moveBox = document.getElementsByClassName('moveBox')[0];
//      获取右边放大镜的框框
var big = document.getElementsByClassName('bigImg')[0];
//      获取右边放大镜里面的图片
var bigImg = big.getElementsByTagName('img')[0];
//      鼠标移入放图片框框触发移入事件;显示红色盒子和右边放大镜
box.onmouseenter = function() {
moveBox.style.display = 'block';
big.style.display = 'block';
//      鼠标在盒子中移动时触发的事件
box.onmousemove = function(ev) {
var ev = ev || event;
//              获取鼠标在盒子内的x/y值 等于鼠标位置减去大盒子的offsetleft/top 然后为了鼠标居于红色盒子中心所以要减去小盒子的宽/高的一半;
var x = ev.clientX - box.offsetLeft - moveBox.offsetWidth / 2;
var y = ev.clientY - box.offsetTop - moveBox.offsetHeight / 2;
//设置边界 小于0 或者大于大盒子减小盒子的宽/高;
if (x < 0) {
x = 0;
} else if (x > box.offsetWidth - moveBox.offsetWidth) {
x = box.offsetWidth - moveBox.offsetWidth;
}
if (y < 0) {
y = 0;
} else if (y > box.offsetHeight - moveBox.offsetHeight) {
y = box.offsetHeight - moveBox.offsetHeigth;
}
//              将得到的x/y值 赋予小盒子的left/top 小盒子就会跟着鼠标移动

moveBox.style.left = x + 'px';
moveBox.style.top = y + 'px';

//              然后用得到的x/y去除以大盒子的宽/高 得到一个比值
var proX = x / box.offsetWidth;
var proY = y / box.offsetHeight;
//              比值乘以大图片的宽/高就是大图片的移动距离
var imgX = proX * bigImg.offsetWidth;
var imgY = proY * bigImg.offsetHeight;
//注意大图片的移动方向应该与鼠标移动方向相反所以要乘以负数
bigImg.style.left = -imgX + 'px';
bigImg.style.top = -imgY + 'px';
};
//          最后鼠标移开大大盒子事件 将小红色盒子和右边放大镜设为隐藏并且清空事件
box.onmouseleave = function() {
moveBox.style.display = 'none';
big.style.display = 'none';
box.onmousemove = box.onmouseleave = null;
}
};
</script>

</html>
放大镜demo下载
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签： javascript 商品放大镜
相关文章推荐
新的分享
章节导航