マウスが進行状況バー上をスライドすると進行状況の値を変更する、Mootools で書かれた実装コードを共有する_Mootools

まず効果をお見せしましょう:

効果の紹介:
進行状況バーの上でマウスをスライドさせて、進行状況の値を変更します。
互換性:
IE6、IE7、IE8、Chrome と完全に互換性があります。 Firefox
コード:

コードをコピー コードは次のとおりです:

style type="text/ css">
font-size:12px;
margin-bottom:3px; 🎜>color:#2C2C2C ;
font-family:Arial,Tahoma,"Bitstream Vera Sans",sans-serif;
}
#prg .txt{
min-width:50px;width :auto;float:left ;
}
#prg .num{
color: #656565;
margin:0 6px; >#prg .load{
背景色:#F6F5F5;
高さ:10px;
マージン:1px; 🎜>位置:相対;
#prg #p{
背景色:#F9AE3D;
ボーダー:1px ソリッド #E87F16;最小高さ:8px;
高さ:-1px;
上:-1px; 🎜>

txt">normal< ;/span>

4324323

< script type='text /javascript'>
function xPrg(i,e){
var i=$(i);
if(!i | | !p){return false;}
i.setStyle('cursor','pointer');
i.onclick=function(){
alert('なぜクリックするのか私?');
}
var ex=e.clientX; //マウスの現在位置
var s=p.getPosition().x.toInt();
var bw =i.getStyle('width').toInt(); //プログレスバーボックスの幅(px)
var nw=ex-s;nw=(nw>bw)?bw:nw; nw=(nw p.setStyle('width',nw 'px'); var x=bw/5; if(nw>0 && nw<=x){
$('prg').getElement('.txt').set('text','very bad'); else if(nw>) ;x && nw<= (x*2)){
$('prg').getElement('.txt').set('text','very bad');
}else if( nw>x && nw< =(x*3)){
$('prg').getElement('.txt').set('text','normal');
}else if( nw>x && nw< =(x*4)){
$('prg').getElement('.txt').set('text','very good'); (nw>x && nw< ;=(x*5)){
$('prg').getElement('.txt').set('text','とても良い');
}
}