HTML滑动条自动滑动,html+js写个好看的滑动条

想给网页添加一个滑动条，于是查找资料找到了html5中input类型中的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代码如下：

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

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;

}

改位置，改背景，改颜色，个人看着办。js中数值的绑定慢慢琢磨吧！