通过拖动滚动条进行评分效果，在旁边还带百分比显示效果，很少用到的一个js特效。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>拖动滚动条进行评分效果_武鸣人</title>
<style type="text/css">
body{
margin:50px;
}
.www_wuming_ren{
font-size:12px;
color:#999;
width:200px;
position:absolute;
line-height:18px;
left:60px;
top:-0px;
}
.www_wuming_ren .r{
float:right;
}
.wuming_ren span{
background:url(/img/20240318_www_wuming_ren_6.gif) no-repeat;
width:8px;
height:16px;
position:absolute;
left:-2px;
top:-1px;
cursor:pointer;
}
.wuming_ren{
background:url(/img/20240318_www_wuming_ren_7.gif) repeat-x 0 100%;
border-left:1px #83BBD9 solid;
border-right:1px red solid;
width:200px;
height:10px;
position:relative;
font-size:0px;
}
.wuming_ren div{
background:url(/img/20240318_www_wuming_ren_8.gif) repeat-x;
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>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
本特效无法预览效果，请直接复制代码，在本地保存为网页文件后用IE打开，就可以看到效果了。在实际使用中，不会出现这样的问题。
<ul>
<li>爱情 <span id="title">0%</span>
<div class="www_wuming_ren">
<span class="r">100</span>0
<div class="wuming_ren" id="bar">
<div></div>
<span id="btn"></span>
</div>
</div>
</li>
<li>事业 <span id="title2">0%</span>
<div class="www_wuming_ren">
<span class="r">100</span>0
<div class="wuming_ren" id="bar2">
<div></div>
<span id="btn2"></span>
</div>
</div>
</li>
<li>家庭 <span id="title3">0%</span>
<div class="www_wuming_ren">
<span class="r">100</span>0
<div class="wuming_ren" id="bar3">
<div></div>
<span id="btn3"></span>
</div>
</div>
</li>
</ul>
<script language="javascript">
wuming_ren=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();
};
wuming_ren.prototype={
init:function (){
var f=this,g=document,b=window,m=Math;
f.btn.onmousedown=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+'%';
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
new wuming_ren('btn','bar','title');
new wuming_ren('btn2','bar2','title2');
new wuming_ren('btn3','bar3','title3');
</script>
</body>
</html>本文来自武鸣人网站，转载请注明出处