JS实现拖动滚动条评分的效果代码分享
小编教你JS特效拖动滚动条可以评分效果，小编感觉挺不错，用时候可能需要ASP/PHP或其它语言配合取值并写入数据库，这是前台的实现。
直接上代码看看JS的神奇吧！
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>JS实现拖动<ahref="https://www.nhooo.com/zt/gundongtiao/"target="_blank"class="infotextkey">滚动条</a>评分的特效(www.nhooo.com)</title>
<style>
body{
margin:50px;;
}
.scale_panel{
font-size:12px;
color:#999;
width:200px;
position:absolute;
<ahref="https://www.nhooo.com/article/15092.html"target="_blank"class="infotextkey">line-height</a>:18px;
left:60px;
top:-0px;
}
.scale_panel.r{
float:right;
}
.scalespan{
width:8px;
height:16px;
position:absolute;
left:-2px;
top:-1px;
cursor:pointer;
}
.scale{
border-left:1px#83BBD9solid;
border-right:1pxredsolid;
width:200px;
height:10px;
position:relative;
font-size:0px;
}
.scalediv{
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>爱情<spanid="title">0</span>
<divclass="scale_panel">
<spanclass="r">100</span>0
<divclass="scale"id="bar">
<div></div>
<spanid="btn"></span>
</div>
</div>
</li>
<li>事业<spanid="title2">0</span>
<divclass="scale_panel">
<spanclass="r">100</span>0
<divclass="scale"id="bar2">
<div></div>
<spanid="btn2"></span>
</div>
</div>
</li>
<li>家庭<spanid="title3">0</span>
<divclass="scale_panel">
<spanclass="r">100</span>0
<divclass="scale"id="bar3">
<div></div>
<spanid="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(){
varf=this,g=document,b=window,m=Math;
f.btn.onmou<ahref="https://www.nhooo.com/article/1141.html"target="_blank"class="infotextkey">sed</a>own=function(e){
varx=(e||b.event).clientX;
varl=this.offsetLeft;
varmax=f.bar.offsetWidth-this.offsetWidth;
g.onmousemove=function(e){
varthisX=(e||b.event).clientX;
varto=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=newFunction('this.onmousemove=null');
};
},
ondrag:function(pos,x){
this.step.style.width=Math.max(0,x)+'px';
this.title.innerHTML=pos+'%';
}
}
newscale('btn','bar','title');
newscale('btn2','bar2','title2');
newscale('btn3','bar3','title3');
</script>
<br/>
</html>
以上所述是小编给大家介绍的JS实现拖动滚动条评分的效果代码分享，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！