您的位置：首页 > 其它

京东 淘宝 的图片放大镜功能

2017-04-07 20:11 337 查看 
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 350px;
height: 350px;
border: 1px solid #ccc;
margin: 100px;
position: relative;
}
.big{
width: 450px;
height: 450px;
border: 1px solid #ccc;
position: absolute;
top: 0;
left: 350px;
overflow: hidden;
display: none;
}
.mask{
width: 200px;
height: 200px;
background: rgba(235,235,0,0.4);
position: absolute;
top: 0;
left: 0;
display: none;
cursor: move;
}
.samll{
position: relative;
}
.big img{
/*transform: translate(10px,50px);*/
/*position: absolute;*/
left: 0px;
top: 0;
}
</style>
</head>
<body>
<div class="box">
<div class="samll">
<img src="./images/001.jpg" alt="">
<div class="mask"></div>
</div>
<div class="big">
<img src="./images/0001.jpg" alt="">
</div>
</div>
<script>
//实现效果：
//鼠标放到小图片上面的时候，后面的大盒子出现。鼠标离开的时候大盒子隐藏。
//鼠标移动的时候，大盒子内的大图片也移动。
var small = document.getElementsByClassName('samll')[0];
var big = document.getElementsByClassName('big')[0];
var mask = document.getElementsByClassName('mask')[0];
var box = document.getElementsByClassName('box')[0];
var img = big.children[0];
big.style.display = 'none';//事件发生之前，后面的大盒子先隐藏起来
small.onmouseover = function () {
big.style.display = 'block';//鼠标放上的时候，大盒子出现;
mask.style.display = 'block';//与鼠标同步的放大镜也同时出现;
}
small.onmouseout = function () {//鼠标离开的时候，与上面的效果反之。
big.style.display = 'none';
mask.style.display = 'none';
}
small.onmousemove = function () {//鼠标移动事件
//            如果mask的到父元素左边的值大于 其父元素的宽度减去放大镜的宽度。就都等于父元素的宽度-mask的宽度。
//放大镜的横坐标的值 等于当前鼠标的横坐标值减去box到其父元素左边（即浏览器）减去放大镜宽度的一半，鼠标始终保持在放大镜的中央。
mask.style.left = event.clientX-box.offsetLeft-mask.offsetWidth/2+'px';
//纵坐标，与上同理。
mask.style.top = event.clientY-box.offsetTop-mask.offsetHeight/2+'px';
img.style.left = 500+'px';
//防止放大镜溢出 小图片盒子
//放大镜到父元素的左边的距离 如果大于 小图片盒子的宽度 减去放大镜的宽度 即表示放大镜溢出
// 则令其等于 小图片盒子的宽度 减去放大镜的宽度
if(mask.offsetLeft>small.offsetWidth-mask.offsetWidth){
mask.style.left = (small.offsetWidth-mask.offsetWidth)+'px';
//放大镜的Left的值如果为负，就为零
}else if(mask.offsetLeft<=0){
mask.style.left = 0+'px';
//纵坐标 与上同理
}if(mask.offsetTop>small.offsetHeight-mask.offsetHeight){
mask.style.top = (small.offsetHeight-mask.offsetHeight)+'px';
}else if(mask.offsetTop<=0){
mask.style.top = 0+'px';
}
//移动时 大图片移动的距离 应是 鼠标移动距离 放大镜到父元素的距离乘以大图片宽高除以小图片宽高
var numX = big.offsetWidth/box.offsetWidth;
var numY = big.offsetHeight/box.offsetHeight;
//            alert(beinum);
img.style.transform = "translateX("+-mask.offsetLeft*numX+"px"+")"
+"translateY("+-mask.offsetTop*numY+"px"+")";
}

</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航