小编教你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.jb51.net/zt/gundongtiao/" target="_blank">滚动条</a>评分的特效 (www.jb51.net)</title> <style> body{ margin:50px; ; } .scale_panel{ font-size:12px; color:#999; width:200px; position:absolute; <a href="http://www.jb51.net/article/15092.html" target="_blank">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> <span>100</span>0 <div id="bar"> <div></div> <span id="btn"></span> </div> </div> </li> <li>事业 <span id="title2">0</span> <div> <span>100</span>0 <div id="bar2"> <div></div> <span id="btn2"></span> </div> </div> </li> <li>家庭 <span id="title3">0</span> <div> <span>100</span>0 <div 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.jb51.net/article/1141.html" target="_blank">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>
以上所述是小编给大家介绍的JS实现拖动滚动条评分的效果代码分享，希望对大家有所帮助，如果大家有任何疑问请给我们留言，小编会及时回复大家的。在此也非常感谢大家对查字典教程网的支持！