html 调节大小拉条,javascript滑块的实现（手机端触屏滑动调节大小）

如下为可调节状态：

风量1.jpg

如下为不可调节状态：

风量2.jpg

html文件：

slider

风量调节

m³/h

切换按钮状态 //button切换可调节和不可调节状态

javascript文件(包含的一些数字是测量的实际image大小，用于计算风量大小、滑块位置等信息)：

var div1 = document.getElementById('btn');

var div2 = document.getElementById('button');

var div3 = document.getElementById('bgm');

function changeSlider() {

if (div2.value == "close") {

div1.style.background = "url(images/3.png)";

div2.value = "open";

div3.style.backgroundColor = "dodgerblue";

} else if (div2.value == "open") {

div1.style.background = "url(images/4.png)";

div2.value = "close";

div3.style.backgroundColor = "grey";

}

}

var num = 10; //默认初始数值为10

var num001 = num / 1.6;

var w = document.getElementById('bar').clientWidth;

var www001 = 3000 / w;

var www002 = 3200 / w;

scale = function (btn, bar, title) {

this.btn = document.getElementById(btn);

this.bar = document.getElementById(bar);

this.title = document.getElementById(title);

this.step = this.bar.getElementsByTagName("DIV")[0];

this.init();

};

scale.prototype = {

init: function () {

var t = this;

var d = document;

this.step.style.width = (num001 + www001) + '%'; //进度条初始位置

this.title.innerHTML = num;//风量数值

this.btn.style.left = (num001 - www002) + '%';//滑块初始位置

t.btn.addEventListener('touchstart', function (e) {

var touchobj1 = e.changedTouches[0];

var x = touchobj1.clientX;

var l = this.offsetLeft;

var z = t.bar.offsetWidth;

d.addEventListener('touchmove', function (e) {

if (div2.value == "open") {

var touchobj2 = e.changedTouches[0];

var thisX = touchobj2.clientX;

var to = Math.min(z, Math.max(0, l + 34 + (thisX - x)));

t.btn.style.left = to - 34 + 'px';

t.ondrag(Math.round(Math.max(0, to / z) * 160), to);

} else {

return false;

}

}, false);

d.addEventListener('touchend', function (e) {

this.touchmove = null;

}, false);

}, false);

},

ondrag : function (pos, x) {

this.step.style.width = Math.max(0, x) + 'px';

this.title.innerHTML = pos + '';

}

};

new scale('btn', 'bar', 'title');

css文件：

@charset "utf-8";/* CSS Document */

body {

padding:0;

background:rgb(235,237,240);

margin-top: 5%;

margin-left: 15%;

margin-right: 15%;

}

.User_ratings .ratings_bars {

margin-top:10px;

width: 100%;

float:left;

}

.User_ratings .ratings_bars .scale {

width:70%;

height:34px;

margin:3% 0 0 0 ;

position:absolute;

background-color: #bfbebe;

box-shadow: 0 1px 1px #def3f8, inset 0 .125em .125em #0d1112,0 0 0 10px #bfbebe;

background-size: 100% 33px;

border-radius: 25px;

}

.User_ratings .ratings_bars .scale div {

position:absolute;

height:34px;

background-color: dodgerblue;

box-shadow: 0 1px 1px #def3f8, inset 0 .125em .125em #0d1112;

background-size:100% 30px;

border-radius: 25px;

}

.User_ratings .ratings_bars .scale span {

width:68px;

height:68px;

position:absolute;

top:-20px;

cursor:pointer;

background:url(../images/3.png) no-repeat;

}