JavaScript-滑动条_javascript 滑动条

作者：你好赵伟 | 2024-05-31 05:20:55

踩

javascript 滑动条

在这里插入图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>滑动条</title>
	<style type="text/css">
		*{
			margin: 0px;
			padding: 0px;
		}
		.box{
			width: 400px;
			height: 10px;
			position: relative;
			left: 0px;
			top: 0px;
			background-color: #ccc;
			margin: 100px auto;
		}
		.box .box2{
			width: 10px;
			height: 20px;
			background-color: #369;
			position: absolute;
			left: 0px;
			top: -5px;
			cursor: pointer;
			/*cursor: default;*/
		}
		.box .cover{
			width: 0px;
			height: 10px;
			position: absolute;
			left: 0px;
			top: 0px;
			background-color: #369;

		}
	</style>
	<script type="text/javascript">
		function $(id){
			return document.getElementById(id);
		}
		window.onload=function(){
			$("2box").onmousedown=function(event){
				var evt=event||window.event;
				var left1=evt.clientX-$("2box").offsetLeft;//长条方块的左边框的距离+鼠标距小蓝色方块的左边框的距离；
				document.onmousemove=function(event){
					var evt=event||window.event;
					var location=evt.clientX-left1;
					if(location<0)
					{
						location=0;
					}
					else if(location>390)
					{
						location=390;
					}
					$("2box").style.left=location+"px";
					$("cover1").style.width=location+"px";
				}
				document.onmouseup=function(){
					document.onmousemove=null;//取消注册的onmousemove事件;
				}
			}
		}
	</script>
</head>
<body>
	<div class="box" id="1box">
		<div class="box2" id="2box"></div>
		<div class="cover" id="cover1"></div>
	</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/650542