小编教你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="//www.VeVB.COm/zt/gundongtiao/" target="_blank" class="infotextkey">滚动条</a>评分的特效 (www.VeVB.COm)</title><style>body{margin:50px; ; }.scale_panel{font-size:12px;color:#999;width:200px;position:absolute; <a href="//www.VeVB.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="//www.VeVB.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>以上所述是小编给大家介绍的JS实现拖动滚动条评分的效果代码分享，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持！
新闻热点
疑难解答
