JS实现拖动滚动条评分的效果代码分享

271 阅读 0 评论 179 点赞

我是靠谱客的博主正直飞机，这篇文章主要介绍JS实现拖动滚动条评分的效果代码分享，现在分享给大家，希望可以做个参考。

小编教你JS特效拖动滚动条可以评分效果，小编感觉挺不错，用时候可能需要ASP/PHP或其它语言配合取值并写入数据库，这是前台的实现。

直接上代码看看JS的神奇吧！

复制代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>JS实现拖动<a href="http://www.uoften.com/zt/gundongtiao/" target="_blank" class="infotextkey">滚动条</a>评分的特效 (www.uoften.com)</title>
<style>
body{
margin:50px; ; 
}
.scale_panel{
font-size:12px;
color:#999;
width:200px;
position:absolute; 
<a href="http://www.uoften.com/article/15092.html" target="_blank" class="infotextkey">line-height</a>:18px; 
left:60px;
top:-0px;
}
.scale_panel .r{
float:right;
}
.scale span{
width:8px;
height:16px; 
position:absolute; 
left:-2px;
top:-1px;
cursor:pointer;
}
.scale{
border-left:1px #83BBD9 solid;
border-right:1px red solid;
width:200px;
height:10px; 
position:relative; 
font-size:0px;
}
.scale div{
width:0px; 
position:absolute; 
width:0;
left:0;
height:5px;
bottom:0;
}
li{
font-size:12px;
line-height:50px;
position:relative; 
height:50px; 
list-style:none;
}
</style>
</head>
<body>
<ul>
<li>爱情 <span id="title">0</span>
<div class="scale_panel">
<span class="r">100</span>0
<div class="scale" id="bar">
<div></div>
<span id="btn"></span>
</div> 
</div> 
</li>
<li>事业 <span id="title2">0</span>
<div class="scale_panel">
<span class="r">100</span>0
<div class="scale" id="bar2">
<div></div>
<span id="btn2"></span>
</div> 
</div> 
</li>
<li>家庭 <span id="title3">0</span>
<div class="scale_panel">
<span class="r">100</span>0
<div class="scale" id="bar3">
<div></div>
<span id="btn3"></span>
</div> 
</div> 
</li>
</ul>
</body>
<script>
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.onmou<a href="http://www.uoften.com/article/1141.html" target="_blank" class="infotextkey">sed</a>own=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+'%';
}
}
new scale('btn','bar','title');
new scale('btn2','bar2','title2');
new scale('btn3','bar3','title3');
</script>
<br />
</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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>JS实现拖动<a href="http://www.uoften.com/zt/gundongtiao/" target="_blank" class="infotextkey">滚动条</a>评分的特效 (www.uoften.com)</title>
<style>
body{
margin:50px; ; 
}
.scale_panel{
font-size:12px;
color:#999;
width:200px;
position:absolute; 
<a href="http://www.uoften.com/article/15092.html" target="_blank" class="infotextkey">line-height</a>:18px; 
left:60px;
top:-0px;
}
.scale_panel .r{
float:right;
}
.scale span{
width:8px;
height:16px; 
position:absolute; 
left:-2px;
top:-1px;
cursor:pointer;
}
.scale{
border-left:1px #83BBD9 solid;
border-right:1px red solid;
width:200px;
height:10px; 
position:relative; 
font-size:0px;
}
.scale div{
width:0px; 
position:absolute; 
width:0;
left:0;
height:5px;
bottom:0;
}
li{
font-size:12px;
line-height:50px;
position:relative; 
height:50px; 
list-style:none;
}
</style>
</head>
<body>
<ul>
<li>爱情 <span id="title">0</span>
<div class="scale_panel">
<span class="r">100</span>0
<div class="scale" id="bar">
<div></div>
<span id="btn"></span>
</div> 
</div> 
</li>
<li>事业 <span id="title2">0</span>
<div class="scale_panel">
<span class="r">100</span>0
<div class="scale" id="bar2">
<div></div>
<span id="btn2"></span>
</div> 
</div> 
</li>
<li>家庭 <span id="title3">0</span>
<div class="scale_panel">
<span class="r">100</span>0
<div class="scale" id="bar3">
<div></div>
<span id="btn3"></span>
</div> 
</div> 
</li>
</ul>
</body>
<script>
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.onmou<a href="http://www.uoften.com/article/1141.html" target="_blank" class="infotextkey">sed</a>own=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+'%';
}
}
new scale('btn','bar','title');
new scale('btn2','bar2','title2');
new scale('btn3','bar3','title3');
</script>
<br />
</html>