放大镜
放大镜：淘宝等电商页面应用广泛... 思路：先让move块和bimg块隐藏，当鼠标移动到box上时，使move块和bimg块显示，获取鼠标当前的位置，然后经过计算给与move块和bimg块适当的值实现放大镜效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>放大镜</title>
<style type="text/css">
*{
margin: 0;padding: 0;
}
#magnifier {
width: 800px;
position: relative;
margin: 50px 50px;
}
#magnifier #sImg{
width: 360px;
height: 360px;
border: 1px solid #ccc;
float: left;
cursor: move;
}
#magnifier #move{
width: 180px;
height: 180px;
position: absolute;
top: 0;
left: 0;
background:#000;
opacity: .3;
display: none;
}
#magnifier #bImg{
width: 420px;
height: 420px;
border: 1px solid #ccc;
float: right;
overflow: hidden;
display: none;
position: relative;
}
#pic {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div id="magnifier">
<div id="sImg">
<img src="img/pic.jpg" width="360" height="360"/>
<span id="move"></span>
</div>
<div id="bImg">
<img src="img/pic.jpg" height="800" width="800" id="pic"/>
</div>
</div>
<script type="text/javascript">
var mag = document.getElementById("magnifier"); //获取大盒子
var sImg = document.getElementById("sImg");//获取左边盒子
var oMove = document.getElementById("move");//获取小黑框
var bImg = document.getElementById("bImg");//右边的盒子
var oPic = document.getElementById("pic");//右边图片
sImg.onmouseover = function(){ //鼠标移入小图片显示滑块跟大图片
oMove.style.display = 'block';
bImg.style.display = 'block';
}
sImg.onmouseout = function(){ //鼠标移出小图片隐藏滑块跟大图片
oMove.style.display = 'none';
bImg.style.display = 'none';
}
sImg.onmousemove = function( ev ){ //当鼠标进入小图片时让小滑块移动
ev = ev || event; //事件对象
var mL = mag.offsetLeft; // 大DIV的距离左面的距离
var mT = mag.offsetTop; // 大DIV的距离上面的距离
//为了让鼠标居中，拿到小滑块自身的宽度除以2
var mW = oMove.offsetWidth / 2;
//为了让鼠标居中，拿到小滑块自身的高度除以2
var mH = oMove.offsetHeight / 2;
var x = ev.clientX - mL - mW; //拿到当前鼠标在小图片内的x轴移动位置
var y = ev.clientY - mT - mH; //拿到当前鼠标在小图片内的Y轴移动位置
var mMw = sImg.offsetWidth - oMove.offsetWidth; //算出小滑块最大的移动宽度
var mMh = sImg.offsetHeight - oMove.offsetHeight; //算出小滑块最大的移动高度
if( x < 0 ){ //如果当前距离小于0，强制让他等于0
x = 0;
}else if( x > mMw ){
//如果当前距离大于小滑块最大的移动宽度，那么让他当前的位置等于小滑块最大的移动宽度
x = mMw;
};
if( y < 0 ){ //如果当前距离小于0，强制让他等于0
y = 0;
}else if( y > mMh ){
//如果当前距离大于小滑块最大的移动高度，那么让他当前的位置等于小滑块最大的移动高度
y = mMh;
};
oMove.style.left = x + 'px'; //把当前的位置赋给小滑块
oMove.style.top = y + 'px'; //把当前的位置赋给小滑块
//算比例，算大图对应小图的比例
var preX = x / mMw;
var preY = y / mMh;
//赋值
oPic.style.left = -preX*( oPic.offsetWidth - bImg.offsetWidth )+'px';
oPic.style.top = -preY*( oPic.offsetHeight - bImg.offsetHeight )+'px';
}
</script>
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017.11.20 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读