小編教你JS特效拖動(dòng)滾動(dòng)條可以評(píng)分效果，小編感覺(jué)挺不錯(cuò)，用時(shí)候可能需要ASP/PHP或其它語(yǔ)言配合取值并寫(xiě)入數(shù)據(jù)庫(kù)，這是前臺(tái)的實(shí)現(xiàn)。
直接上代碼 看看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實(shí)現(xiàn)拖動(dòng)<a href="http://m.survivalescaperooms.com/zt/gundongtiao/" target="_blank" class="infotextkey">滾動(dòng)條</a>評(píng)分的特效 (m.survivalescaperooms.com)</title><style>body{margin:50px; ; }.scale_panel{font-size:12px;color:#999;width:200px;position:absolute; <a href="http://m.survivalescaperooms.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>愛(ài)情 <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>事業(yè) <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://m.survivalescaperooms.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實(shí)現(xiàn)拖動(dòng)滾動(dòng)條評(píng)分的效果代碼分享，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)VeVb武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
