【教学视频】网页特效_水平拖拽滚动条案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>由于8的不适用复杂嵌套的盒子，如果父盒子太多且都定位的话，8不在适用，不利于后期封装</title>
<style>
*{margin:0;padding:0;}
.line {
width: 400px;
height: 10px;
background-color: #CCC;
margin: 100px;
position: relative;
}
.line .tag {
width: 10px;
height: 30px;
background-color: #ec5c00;
position: absolute;
top: -10px;
left: 0;
cursor: pointer;
}
.line .bc {
width: 0;
height: 10px;
background-color: #0e90d2;
}
</style>
</head>
<body>
<div class="line" id="line">
<div class="tag"></div>
<div class="bc"></div>
</div>
</body>
</html>
<script>
var line = document.getElementById("line");
var tag = line.children[0];
var bc = line.children[1];
leDrag(bc,tag);
/**
* address:
* 水平拖动
* @param target 受bar拖动而改变背景的目标盒子
* @param bar
*/
function leDrag(target,bar) {
var step = 0;
bar.onmousedown = function(event) {
var event = event || window.event;
// bar被按下的位置距离浏览器左窗口距离
var barLeft = event.clientX - this.offsetLeft;
document.onmousemove = function(event) {
var event = event || window.event;
step = event.clientX-barLeft;
if(step<0){
step = 0;
}else if(step>bar.offsetParent.offsetWidth - bar.offsetWidth){
step = bar.offsetParent.offsetWidth - bar.offsetWidth;
}
bar.style.left = step + "px";
target.style.width = step + "px";
// 清除选择拖动，不写这句话，会出现如果滑的快，弹起后依旧跟着鼠标走
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
}
// 是document的onmouseup事件，不是tag的
document.onmouseup = function() {
// 清除事件
document.onmousemove = null;
}
}
}
</script>
原文地址：https://www.cnblogs.com/liudaihuablogs/p/9458877.html
时间： 2024-10-12 15:35:54