原生JS实现拖拽进度条、滚动鼠标显示相应的内容
今天要分享的是运用原生JS实现拖拽进度条、滚动鼠标显示相应的内容，实现效果如下：
以下是代码实现，欢迎大家复制粘贴。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生JS实现拖拽进度条、滚动鼠标显示相应的内容</title>
<style>
#parent {
width: 400px;
height: 20px;
background: #CCC;
position: relative;
margin: 20px auto;
}
#div1 {
width: 20px;
height: 20px;
background: red;
cursor: pointer;
position: absolute;
}
#div2 {
width: 200px;
height: 300px;
margin: 0 auto;
border: 1px solid black;
position: relative;
overflow: hidden;
}
#div3 {
position: absolute;
}
</style>
<script>
function myAddEvent(obj, sEvent, fn) {
//针对IE浏览器
if (obj.attachEvent) {
obj.attachEvent('on' + sEvent, fn);
//针对火狐 和Chrome浏览器
} else {
//DOM事件只能通过addEventListener来添加
obj.addEventListener(sEvent, fn, false);
}
}
window.onload = function () {
var oDiv = document.getElementById('div1');
var oParent = document.getElementById('parent');
var oDiv2 = document.getElementById('div2');
var oDiv3 = document.getElementById('div3');
//鼠标滚动时
function onMouseWheel(ev) {
//一切事件的详细信息都包括在事件对象里面
var oEvent = ev || event;
//处理兼容性，记录上向上滚的还是向下滚的
var bDown = true;
//wheelDelta IE下独有的
//oEvent.detail Firefox下的
//当滚动距离小于0时为false，大于0时为true
bDown = oEvent.wheelDelta ? oEvent.wheelDelta < 0 : oEvent.detail > 0;
if (bDown) {
//让Div的left值加10
setLeft(oDiv.offsetLeft + 10);
} else {
//让Div的left值减10
setLeft(oDiv.offsetLeft - 10);
}
//针对Firefox下阻止事件默认,防止滚动时DIV和页面滚动一起发生变化
if (oEvent.preventDefault) {
oEvent.preventDefault();
}
//针对IE和Chrome下阻止默认,防止滚动时DIV和页面滚动一起发生变化
return false;
}
//IE attach mousewheel
//FF add DOMMouseScroll
//Chrome add mousewheel
//基于以上情况，用兼容性方法添加事件(滑块上滚动)
myAddEvent(oParent, 'mousewheel', onMouseWheel);
myAddEvent(oParent, 'DOMMouseScroll', onMouseWheel);
//基于以上情况，用兼容性方法添加事件(内容上滚动)
myAddEvent(oDiv2, 'mousewheel', onMouseWheel);
myAddEvent(oDiv2, 'DOMMouseScroll', onMouseWheel);
//鼠标按下时
oDiv.onmousedown = function (ev) {
var oEvent = ev || event;
var disX = oEvent.clientX - oDiv.offsetLeft;
//鼠标移动时
document.onmousemove = function (ev) {
var oEvent = ev || event;
var l = oEvent.clientX - disX;
setLeft(l);
};
//鼠标抬起时
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
};
};
//设置滑块的left值
function setLeft(l) {
//限制范围
if (l < 0) {
l = 0;
} else if (l > oParent.offsetWidth - oDiv.offsetWidth) {
l = oParent.offsetWidth - oDiv.offsetWidth;
}
oDiv.style.left = l + 'px';
//计算滚动距离相对滚动范围的比例
var scale = l / (oParent.offsetWidth - oDiv.offsetWidth);
//让Div3随着滚动的距离上下滑动显示内容
oDiv3.style.top = -(oDiv3.offsetHeight - oDiv2.offsetHeight) * scale + 'px';
}
};
</script>
</head>
<body>
<div id="parent">
<div id="div1"></div>
</div>
<div id="div2">
<div id="div3">
关于我们
我们是一支独具特色的IT培训团队，反对传统IT教育枯燥
乏味的教学模式，提供一种全新的快乐学习方法！
目前主要针对的是javascript培训，同时还提供了css教程、javascript
视频、js特效等，最新推出了外地学员们喜欢的javascript网络课程服
务，同时还为处于javascript入门阶段的朋友录制了大量javascript视
频，其中涉及了大量javascript基础知识，希望我们推出的javascript
网络培训课程能带给大家更多惊喜。
关于讲师：
我们的讲师来自中国最具吸引力的IT企业，如淘宝、ShopEx等。
前端开发讲师：Leo WEB 前端开发工程师(5年)、CSS 精品课
程讲师(3年)，公司创始人；曾任北京科尔威视、ShopEx 北京营
销中心 ECMall 项目前端架构师；精通 XHTML+CSS 架构，深刻理解
W3C 标准，熟练掌握系统的浏览器兼容性解决方案，擅长大型网站前
端架构及调试各类页面错位等诸多兼容性问题的疑难杂症；专注于网站
用户体验性研究，并在视频、电子商城、教育平台、企业级应用站点拥
有数量庞大的案例和多年实战经验；
</div>
</div>
</html>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2019/08/10 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
