html+js自定义滑动条

Posted ranmomo

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html+js自定义滑动条相关的知识,希望对你有一定的参考价值。

想给网页添加一个滑动条,于是查找资料找到了html5input类型中的range,试着用了一下在各个浏览器的样式差别太大,而且不太好看。果断放弃,不如自己用 javascript写一个,效果图如下:技术图片技术图片

通过图片可以看出来用了 3 个 div
1、可以被鼠标拖拽的 小人 用来作为可以拖拽的按钮
2、整个可填充的 白色长条
3、可变化长度的 黑色长条

思路很简单:
一个可以鼠标拖拽的div,只能横向移动,移动的同时改变黑色长条的width。还要限制移动的范围只能在白色长条的范围内。

限制:
1、两个端点的数值跟鼠标的位置有关,会出现略微的抖动
2、不能用于移动端的设备,也不建议用于移动端,效果不好,就不放移动端的代码了
3、不能用于过于精细的操作中,两端的数值不是很准

css代码如下:(从新抽取的代码,有点丑)

html,
body {
	margin: 0px;
	height: 100%;
}
.tool{
	height: 20%;
	width: 100%;
	margin: auto;
	position: relative;
}
/*拖拽按钮的样式*/
#ball{
	height: 80%;
	width: 10%;
	position: absolute;
	left: 5%;
	cursor: move;
	background-color: #ff55ff;
	z-index: 1;
}
/*底层长条*/
#range{
	width: 90%;
	height: 20%;
	background-color: #00ffff;
	border-radius: 20px;
	position: absolute;
	bottom: 50%;
	left: 5%;
}
/*顶层长条*/
#rangeTop{
	width: 5%;
	height: 20%;
	background-color: #000000;
	border-radius: 20px;
	position: absolute;
	bottom: 50%;
	left: 5%;
}

html和js代码如下:

<div class="tool" id="rangeAll">
	<div id="ball"></div>
	<div id="range"></div>
	<div id="rangeTop"></div>
</div>

<script type="text/javascript">
	var body = document.getElementsByTagName("body")[0];
	//自定义range,好用,杠杠的
	var ball=document.getElementById("ball")
	var range=document.getElementById("range")
	var rangeTop=document.getElementById("rangeTop")
	//声明全局变量
	var leftCha,topCha;
	//定义鼠标是否按下的标识
	var isDown = false;

	ball.onmousedown = function(e){
			 var e = e || window.event;
			 leftCha = e.clientX - ball.offsetLeft;
			 isDown = true;
	}
	window.onmousemove = function(e){
		 var e = e || window.event;
		 if(!isDown){
				 return;  //终止程序执行
		 }
		 if(ball.offsetLeft<range.offsetLeft){
			 ball.style.left =range.offsetLeft+"px"
			 isDown = false;
			 return
		 }
		 if(ball.offsetLeft>range.offsetWidth){
			 ball.style.left =range.offsetWidth+"px"
			 isDown = false;
			 return
		 }
		 
		 ball.style.left = e.clientX - leftCha + ‘px‘;
		 rangeTop.style.width=ball.offsetLeft+"px"
		 /*改变透明度,我用来改变亮度*/
		 body.style.opacity=((range.offsetWidth-ball.offsetLeft*0.7)/range.offsetWidth)
			 
	}
	ball.onmouseup = function(e){
			 isDown = false;
	}				
</script>

技术图片

以上是关于html+js自定义滑动条的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段——JS中的面向对象编程

VSCode自定义代码片段9——JS中的面向对象编程

JS或者jquery怎么设置滚动条回到顶部

VSCode自定义代码片段5——HTML元素结构

VSCode自定义代码片段5——HTML元素结构

VSCode自定义代码片段5——HTML元素结构