您的位置：首页 > Web前端 > JavaScript

js 长图拖动效果

2017-10-10 11:39 176 查看

项目中遇到的长图模式切换，耗时半天琢磨出来的。记录下来，防止自己忘掉。

1. 知识点罗列

css：


类型	描述	备注
overflow	hidden	隐藏长图
position	absolute	方便拖动
height	auto	长图模式

js:


类型	描述	备注
event	ev\|\|event	兼容浏览器
clientX		鼠标相对父窗体的位置
offsetLeft		当前元素到父窗体的左边框距离
offsetTop		当前元素到父窗体的上边框距离
offsetHeight		当前元素的可视高度
scrollHeight		当前元素的高度(包含被隐藏的部分)

2. 资源

图片一张

jquery

jquery.min.js

3. 代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
<div class="slider" id="slider" style="height:200px;width:200px;overflow: hidden;position:absolute;border:2px solid orange">
<img id="drag_image" href="1.html" style="position:absolute;width:100%" src="02.jpg" />
</div>
<button id="button1" type="button" style="position:relative;top: 200px;">短图模式</button>
</body>
<script>
$("#button1").on("click", function() {
var button1 = $("#button1");
var slide = $("#slider");
if (button1.text() == "长图模式") {
button1.text("短图模式");
slide.find("img").css("height", "auto");
} else {
button1.text("长图模式");
slide.find("img").css("height", "100%");
}
});

window.onload = function() {
var oDiv = document.getElementById('slider');
var oImg = document.getElementById('drag_image');
oImg.onmousedown = function(ev) {
var ev = ev || event;
var disX = ev.clientX - this.offsetLeft; //鼠标相对于<包裹image的元素div>的位置
var disY = ev.clientY - this.offsetTop;
document.onmousemove = function(ev) {
var ev = ev || event;
var vertical_dis = ev.clientY - disY - oDiv.offsetTop; //竖直方向位移差
var height_minus = oDiv.offsetHeight - oImg.scrollHeight;//包裹图片div与img的高度差  小于该值时不允许继续滑动
// if(vertical_dis > 0 ){
//  obj.style.top = 0+'px';
// }else if(vertical_dis<height_minus){
//  obj.style.top = height_minus +'px';
// }else{
//  obj.style.top = vertical_dis + 'px';
// }
oImg.style.top = vertical_dis > 0 ? 0 + 'px' : (vertical_dis < height_minus ? height_minus + 'px' : vertical_dis + 'px'); //等价于上述注释代码
}
document.onmouseup = function() {
document.onmous
4000
emove = document.onmouseup = null;
}
return false;  //必须要有 防止拖动产生异常 拖动结束退出函数
}
}
</script>
</html>

4. 总结

一开始觉得有点难度，主要还是scrollHeight、offsetTop、offsetHeight、pageX、clientX等掌握不牢导致的，后面要好好研究这些东西的差异，并记录demo。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript 长图拖动

相关文章推荐

新的分享

章节导航