**
移动端滑动杆帮助快速录入input输入框的值(PC端与移动端的目录结构一致,images与css共用,只有html不一样,pc端的html在最下面,PC端与移动端的html根据自己的需要自由选择)
先看效果
**
目录结构 (自己在本机建一个这样的结构)
用到的图片(两张)
移动端的index.html
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width">
<title>js滑动杆打分插件DEMO演示</title>
<link type="text/css" href="css/style.css" rel="stylesheet" />
</head>
<body>
<div class="grade_warp">
<div class="User_ratings User_grade" id="div_fraction0">
<div class="ratings_bars">
<span id="title0">0</span>
<span class="bars_10">0</span>
<div class="scale" id="bar0">
<div></div>
<span id="btn0"></span>
</div>
<span class="bars_10">10</span>
</div>
</div>
</div>
<script type="text/javascript">
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 f = this, g = document, b = window, m = Math;
document.getElementById("btn0").addEventListener("touchstart", function(e) {
var x = (e || b.event).changedTouches[0].pageX;
var l = this.offsetLeft;
var max = f.bar.offsetWidth - this.offsetWidth;
g.addEventListener("touchmove", function(e) {
var thisX = (e || b.event).changedTouches[0].pageX;
var to = m.min(max, m.max(-2, l + (thisX - x)));
f.btn.style.left = to + 'px';
f.ondrag(m.round(m.max(0, to / max) * 100), to);
b.getSelection ? b.getSelection().removeAllRanges() : g.selection.empty();
});
g.addEventListener("touchend", function(e) {
new Function('this.onmousemove=null')
});
})
},
ondrag: function (pos, x) {
this.step.style.width = Math.max(0, x) + 'px';
this.title.innerHTML = pos / 10 + '';
}
}
new scale('btn0', 'bar0', 'title0');
</script>
</body>
</html>
style.css
@charset "utf-8";/* CSS Document */
body{margin:0;padding:0;font-family:"宋体";background:#fff;}
a,a:hover{text-decoration:none;cursor: pointer;outline:none;}
ul{list-style:none;}
/*用户评分*/
.grade_warp{width:840px;margin:10px auto 15px auto;}
.User_grade{width:420px;margin: auto auto 10px auto;overflow:hidden;float:left;}
.User_ratings .ratings_title{width:815px;height:78px;font-family:"微软雅黑","宋体";font-size:24px;color:#aaaaaa;}
.User_ratings .ratings_title01{width:407px;height:auto;font-family:"微软雅黑","宋体";font-size:14px;color:#aaaaaa;}
.User_ratings .ratings_title p{float:left;}
.User_ratings .ratings_title p span{font-size:48px;}
.User_ratings .ratings_title p i{color:#7dc234;font-style:normal;}
.User_ratings .ratings_title01 p span{font-size:18px;}
.User_ratings .ratings_title01 p i{color:#7dc234;font-style:normal;}
.User_ratings .ratings_title01 input{width:120px;height:48px;border:0;margin:15px auto auto 45px;float:left;background:url(../images/batton_01.png) -202px -2441px no-repeat;}
.User_ratings .ratings_title01 input:hover{background:url(../images/batton_01.png) -202px -2489px no-repeat;}
.User_ratings .ratings_title01 input01{background:url(../images/batton_01.png) -202px -2537px no-repeat;}
.User_ratings .ratings_title input{width:120px;height:48px;border:0;margin:15px auto auto 45px;float:left;background:url(../images/batton_01.png) -202px -2441px no-repeat;}
.User_ratings .ratings_title input:hover{background:url(../images/batton_01.png) -202px -2489px no-repeat;}
.User_ratings .ratings_title input01{background:url(../images/batton_01.png) -202px -2537px no-repeat;}
.User_ratings .ratings_bars{width:407px;height:27px;margin-top:10px;float:left;}
.User_ratings .ratings_bars #title0{width:25px;height:25px;text-align:center;border:1px solid #bfbebe;line-height:25px;font-family:Georgia, "Times New Roman", Times, serif;font-size:14px;float:left;color:#a0a0a0;margin-right:10px;background:#fff;}
.User_ratings .ratings_bars #title1{width:25px;height:25px;text-align:center;border:1px solid #bfbebe;line-height:25px;font-family:Georgia, "Times New Roman", Times, serif;font-size:14px;float:left;color:#a0a0a0;margin-right:10px;background:#fff;}
.User_ratings .ratings_bars #title2{width:25px;height:25px;text-align:center;border:1px solid #bfbebe;line-height:25px;font-family:Georgia, "Times New Roman", Times, serif;font-size:14px;float:left;color:#a0a0a0;margin-right:10px;background:#fff;}
.User_ratings .ratings_bars #title3{width:25px;height:25px;text-align:center;border:1px solid #bfbebe;line-height:25px;font-family:Georgia, "Times New Roman", Times, serif;font-size:14px;float:left;color:#a0a0a0;margin-right:10px;background:#fff;}
.User_ratings .ratings_bars #title4{width:25px;height:25px;text-align:center;border:1px solid #bfbebe;line-height:25px;font-family:Georgia, "Times New Roman", Times, serif;font-size:14px;float:left;color:#a0a0a0;margin-right:10px;background:#fff;}
.User_ratings .ratings_bars .bars_10{font-family:Georgia, "Times New Roman", Times, serif;font-size:18px;line-height:25px;float:left;color:#a0a0a0;}
.User_ratings .ratings_bars .scale{width:299px;height:13px;float:left;margin:7px 10px auto 10px;position:relative;background:url(../images/progress02.png) 0 0 no-repeat;}
.User_ratings .ratings_bars .scale div{width:0px;position:absolute;width:0;left:0;height:13px;bottom:0;background:url(../images/progress02.png) 0 -14px no-repeat;}
.User_ratings .ratings_bars .scale span{width:10px;height:26px;position:absolute;left:-2px;top:-7px;cursor:pointer;background:url(../images/j.png) no-repeat;}
PC端的 index.html
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js滑动杆打分插件DEMO演示</title>
<link type="text/css" href="css/style.css" rel="stylesheet" />
</head>
<body>
<div class="grade_warp">
<div class="User_ratings User_grade" id="div_fraction0">
<div class="ratings_bars">
<span id="title0">0</span>
<span class="bars_10">0</span>
<div class="scale" id="bar0">
<div></div>
<span id="btn0"></span>
</div>
<span class="bars_10">10</span>
</div>
</div>
</div>
<script type="text/javascript">
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 f = this, g = document, b = window, m = Math;
f.btn.onmousedown = function (e) {
var x = (e || b.event).clientX;
var l = this.offsetLeft;
var max = f.bar.offsetWidth - this.offsetWidth;
g.onmousemove = function (e) {
var thisX = (e || b.event).clientX;
var to = m.min(max, m.max(-2, l + (thisX - x)));
f.btn.style.left = to + 'px';
f.ondrag(m.round(m.max(0, to / max) * 100), to);
b.getSelection ? b.getSelection().removeAllRanges() : g.selection.empty();
};
g.onmouseup = new Function('this.onmousemove=null');
};
},
ondrag: function (pos, x) {
this.step.style.width = Math.max(0, x) + 'px';
this.title.innerHTML = pos / 10 + '';
}
}
new scale('btn0', 'bar0', 'title0');
</script>
</body>
</html>