本文内容概要:
1.基本介绍
2.涉及到的主要知识
3.结构样式搭建
4.功能分析实现
5.小结
商城网站放大镜效果图:
从效果图中可以看出,无非就是操作两张内容相同,但大小不同的图片。通过控制比例来实现放大的效果。但是需要注意的是,两张照片的宽高比必须是成比例的。
原理结构图
大家可以先根据原理图给出的信息先思考一波,然后咱们接着继续。
offsetLeft: 获取当前对象与父元素的左距离
offsetTop: 获取当前对象与父元素的上距离
offsetWidth: 获取元素(含边框)的自身宽度
offsetHight: 获取元素(含边框)自身高度
scrollLeft: 获取元素的左滚距离
scrollTop: 获取元素的上滚距离
event.clientX: 元素的X坐标
event.clientY: 元素的Y坐标
onmouseover: 当鼠标指针位于元素上方时,会发生mouseover事件
onmouseout: 当鼠标指针从元素上移开时,发生mouseout事件
onmousemove: 当鼠标指针在指定的元素中移动时,就会发生mousemove事件
a).实现控制区.box,与显示区左右布局;
b).在控制区中,拖动块move使用position定位于box之上;
具体代码:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5学堂 - H5course</title>
<meta name="viewport" content="width=device-width,user-scalable=no">
<link rel="stylesheet" href="../css/reset.css">
<style>
.wrap {
width: 850px;
height: 400px;
margin: 100px auto;
}
.box, .box-cop{
float: left;
width: 200px;
height: 200px;
border: 1px solid #39f;
}
.box {
position: relative;
margin-right: 45px;
}
.box-cop {
overflow: hidden;
}
.wrap .box-cop {
display: none;
}
.box .box-mov {
display: none;
}
.box-mov {
/*move块样式*/
position: absolute;
left: 0;
top: 0;
width: 50px;
height: 50px;
cursor: move;
background: #000;
opacity: 0.5;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box" id="pic">
<img src="../images/mj.png" alt="" title="">
<div class="box-mov" id="mov"></div>
</div>
<div class="box-cop" id="pic-big">
<img src="../images/mj2.png" alt="" title="">
</div>
</div>
<body>
</html>
显示效果:
实现分析
1.首先,我们需一个显示框,显示框中需要一个img元素来显示原图对象;另外还需要一个容器作为显示框,用于存放大图对象。当鼠标移动到原图上时,通过对大图进行位置控制来显示对应的部位。
2. 当鼠标移动到box上方时,move块将显示,同时在放大区中显示大图的对应位置,所以我们在这里需要使用mousemove事件监听,当我们鼠标移入box时,就需要获取当前鼠标的相对坐标位置。
document.onmousemove = function (e) {
e.preventDefault();
newX = e.clientX; // 获取当前鼠标X轴位置
newY = e.clientY; // 获取当前鼠标Y轴位置
}
3.通过获取到的鼠标坐标位置,减去box左/上距视口的距离,再减去move块所展现出来的宽高的1/2,则得到获取到当前的move块位置。
var nowX = newX - pic.offsetLeft - (mov.offsetWidth / 2);
//获取移动时move块距父级左侧距离
var nowY = newY - pic.offsetTop - (mov.offsetWidth / 2);
//获取移动时move块距父级的顶部距离
4.临界值判断,当move的移动距离超出了box的范围时,需要限制其最大移动值与最小移动值。
//设置move块的X轴最大移动距离
var maxX = pic.offsetWidth - mov.offsetWidth;
//设置move块的Y轴最大移动距离
var maxY = pic.offsetHeight - mov.offsetHeight;
5.根据move块相对于box的占比与放大区相对于大图的占比进行比例计算,得到显示图片的显示位置。
bec.scrollLeft = nowX * 图片占比; // 大图横向显示位置
bec.scrollTop = nowY * 图片占比; // 大图纵向显示位置
6.根据实际需求,当鼠标移入时,使用mouseove触发,放大区显示,移出时,使用mouseout,move块与放大区消失。
pic.onmouseout = function () {
bec.style.display = 'none'; // 移出效果
mov.style.display = 'none';
}
具体代码:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5学堂 - H5course</title>
<meta name="viewport" content="width=device-width,user-scalable=no">
<link rel="stylesheet" href="../css/reset.css">
<style>
.wrap {
width: 850px;
height: 400px;
margin: 100px auto;
}
.box, .box-cop{
float: left;
width: 200px;
height: 200px;
border: 1px solid #39f;
}
.box {
position: relative;
margin-right: 45px;
}
.box-cop {
overflow: hidden;
}
.wrap .box-cop {
display: none;
}
.box .box-mov {
display: none;
}
.box-mov {
/*move块样式*/
position: absolute;
left: 0;
top: 0;
width: 50px;
height: 50px;
cursor: move;
background: #000;
opacity: 0.5;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box" id="pic">
<img src="../images/mj.png" alt="" title="">
<div class="box-mov" id="mov"></div>
</div>
<div class="box-cop" id="pic-big">
<img src="../images/mj2.png" alt="" title="">
</div>
</div>
<script>
var pic = document.getElementById('pic'),
bec = document.getElementById('pic-big'),
mov = document.getElementById('mov');
var newX = 0,
newY = 0,
nowDisX = 0,
nowDisY = 0;
pic.onmouseover = function (e) {
bec.style.display = 'block'; //移入效果
mov.style.display = 'block';
nowDisX = mov.offsetLeft; //当前move块距父级右侧距离
nowDisY = mov.offsetTop; //当前move块距父级顶部距离
e.preventDefault();
document.onmousemove = function (e) {
e.preventDefault();
newX = e.clientX; // 获取当前鼠标X轴位置
newY = e.clientY; // 获取当前鼠标Y轴位置
var nowX = newX - pic.offsetLeft - (mov.offsetWidth / 2);
//获取移动时move块距父级左侧距离
var nowY = newY - pic.offsetTop - (mov.offsetWidth / 2);
//获取移动时move块距父级顶部距离
var maxX = pic.offsetWidth - mov.offsetWidth;
//设置move块的X轴最大移动距离
var maxY = pic.offsetHeight - mov.offsetHeight;
//设置move块的Y轴最大移动距离
if (nowX <= 0) {
nowX = 0; //X轴最小值判断
};
if (nowX >= maxX) {
nowX = maxX;//X轴最大值判断
};
if (nowY <= 0) {
nowY = 0; //Y轴最小值判断
};
if (nowY >= maxY) {
nowY = maxY;//Y轴最大值判断
};
bec.scrollLeft = nowX * 4; // 大图横向显示显示位置
bec.scrollTop = nowY * 4; // 大图纵向显示位置
mov.style.left = nowX + 'px'; //当前的move块X轴位置
mov.style.top = nowY + 'px'; //当前的move块Y轴位置
}
}
pic.onmouseout = function () {
bec.style.display = 'none'; // 移出效果
mov.style.display = 'none';
}
</script>
</body>
</html>
实现效果:
5、小结:
因为在日常项目开发中,对拖拽功能的需求还是比较常见的,这几期从自定义滚动条到放大镜的效果都是基于拖拽原理上实现的,小匠在后面的分享中会继续为大家带来更加实用与有趣的功能效果,希望能够为大家在实际开发中带来一点帮助。