javascript实现放大镜功能
程序员文章站
2022-03-13 22:28:31
本文实例为大家分享了javascript实现放大镜功能的具体代码，供大家参考，具体内容如下描述：当鼠标在小图片上移动时，通过捕捉鼠标在小图片上的位置, 使放大镜的移动方向与大图的水平和垂直方向相反如何...
本文实例为大家分享了javascript实现放大镜功能的具体代码，供大家参考，具体内容如下
描述：当鼠标在小图片上移动时，通过捕捉鼠标在小图片上的位置, 使放大镜的移动方向与大图的水平和垂直方向相反
如何设计
- 页面元素
- 技术要点：事件捕捉和定位
- 难点：计算
涉及技术
- onmouseover：当鼠标指针移动到指定的对象上时发生
- onmouseout：鼠标指针移出指定对象时发生
- onmousemove：鼠标指针移动时发生
- offsetleft | offsettop | offsetwidth | offsetheight
- event.clientx | event.clienty
偏移量与style.left
- style.left返回字符串，例如30px，而offsetleft返回数字30。
- style.left可以读和写，offsetleft是只读的。如果我们想改变div的位置，我们可以修改style.left.
- style.left应事先定义，否则值为空。
需要考虑
- 如何使小画面上的放大镜与大图同步移动
- ie兼容性问题
代码实现
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>magnifier effect</title>
<style>
*{
margin: 0;
padding: 0;
}
#wrap{
width: 400px;
height: 255px;
margin: 50px;
border: 1px solid #ccc;
display: block;
position: relative;
}
#small-box{
position: relative;
z-index: 1;
}
#float-box{
width: 160px;
height: 120px;
position: absolute;
background-color: #ffffcc;
border:1px solid #ccc;
filter: alpha(opacity = 50);
opacity: .5;
display: none;
}
#mask{
position: absolute;
display: block;
width: 400px;
height: 255px;
z-index: 10;
background-color: #ffffff;
filter: alpha(opacity = 0);
opacity: 0;
cursor: move;
}
#big-box{
position: absolute;
top: 0;
left: 460px;
width: 400px;
height: 300px;
overflow: hidden;
border: 1px solid #ccc;
z-index: 1;
display: none;
}
#big-box img{
position: absolute;
z-index: 5;
}
</style>
</head>
<script>
// 页面加载完毕之后执行
window.onload = function(){
// 获取父元素wrap, 小盒子,遮罩层, 放大镜, 大盒子, 大图片
var wrap = document.getelementbyid('wrap');
var smallbox = document.getelementbyid('small-box');
var mask = document.getelementbyid('mask');
var floatbox = document.getelementbyid('float-box');
var bigbox = document.getelementbyid('big-box');
var bigimg = bigbox.getelementsbytagname('img')[0];
console.log(wrap, smallbox, mask, floatbox, bigbox, bigimg);
// 鼠标移动到小盒子上时, 放大镜显示, 大盒子显示
mask.onmouseover = function(){
floatbox.style.display = 'block';
bigbox.style.display = 'block';
}
// 鼠标移出小盒子时, 放大镜隐藏, 大盒子隐藏
mask.onmouseout = function(){
floatbox.style.display = 'none';
bigbox.style.display = 'none';
}
// 添加鼠标移动事件
mask.onmousemove = function(ev){
// 获取当前鼠标移动的位置并考虑ie兼容性
var _event = ev || window.event;
// 获取放大镜向左移动的距离
var left = _event.clientx - wrap.offsetleft - smallbox.offsetleft - floatbox.offsetwidth / 2;
var top = _event.clienty - wrap.offsettop - smallbox.offsettop - floatbox.offsetheight / 2;
// console.log(left, top);
// 考虑边界情况
if(left < 0){
left = 0;
}else if(left > (mask.offsetwidth - floatbox.offsetwidth)){
left = mask.offsetwidth - floatbox.offsetwidth;
}
if(top < 0){
top = 0;
}else if(top > (mask.offsetheight - floatbox.offsetheight)){
top = mask.offsetheight - floatbox.offsetheight;
}
floatbox.style.left = left + 'px';
floatbox.style.top = top + 'px';
// calculate percentage
var percentx = left / (mask.offsetwidth - floatbox.offsetwidth);
var percenty = top / (mask.offsetheight - floatbox.offsetheight);
// calculate displacement of big image, big image has opposite direction of magnifying glass
bigimg.style.left = -percentx * (bigimg.offsetwidth - bigbox.offsetwidth) + 'px';
bigimg.style.top = -percenty * (bigimg.offsetheight - bigbox.offsetheight) + 'px';
}
}
</script>
<body>
<div id="wrap">
<div id="small-box">
<div id="mask"></div>
<div id="float-box"></div>
<img src="./img/macbook-small.jpg" alt="smallmac">
</div>
<div id="big-box">
<img src="./img/macbook-big.jpg" alt="bigmac">
</div>
</div>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。