#6.18
本节为鼠标事件的样例——提示文字滚动条
具体理论相关标注在代码中
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>带有提示文字的滚动条</title>
<style>
div {
width: 25px;
height: 25px;
border: 1px solid black;
line-height: 25px;
text-align: center;
position: absolute; /*接受坐标后绝对定位*/
display: none;
}
</style>
</head>
<body>
<input type="range" min="0" max="100" value="5"/> <!--范围-->
<div></div>
<script>
var input = document.querySelector('input');
var div = document.querySelector('div');
var flag = false; //检测是否鼠标按下的变量
input.onmousemove = function () {
if (flag) {
// console.log('(x,y):('+event.clientX+','+event.clientY+')');
var left = event.clientX; //上节讲过的event
if (left > 135) { //防止溢出边界还有值
left = 135;
}
if (left < 14) { //防止溢出边界还有值
left = 14;
}
div.style.left = left + 'px';
//div.style.left只能接受字符串,所以+'px'统一变成字符串
div.innerHTML = input.value; //h5中的input.value的值
div.style.display = 'block'; //鼠标按下的时候才显示
}
}
input.onmousedown = function () { //鼠标按下
flag = true;
//console.log('(x,y):('+event.clientX+','+event.clientY+')');
}
input.onmouseup = function () { //鼠标放开
flag = false;
div.style.display = 'none'; //鼠标放开后div自动隐藏
}
</script>
</body>
</html>