分享一個(gè)用Mootools寫的鼠標(biāo)滑過(guò)進(jìn)度條改變進(jìn)度值的實(shí)現(xiàn)代碼
先給大家看看效果:
效果介紹:
鼠標(biāo)滑過(guò)進(jìn)度條改變進(jìn)度值.
兼容性:
可完美兼容IE6,IE7,IE8,Chrome,Firefox
代碼:
<script style="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.4.1/mootools-yui-compressed.js"></script>
<style type="text/css">
#prg{
font-size:12px;
height:100%;
margin-bottom:3px;
overflow:hidden;
color:#2C2C2C;
font-family:Arial,Tahoma,"Bitstream Vera Sans",sans-serif;
}
#prg .txt{
min-width:50px;width:auto;float:left;
}
#prg .num{
color: #656565;
font-style:normal;
margin:0 6px;
}
#prg .load{
background-color:#F6F5F5;
border:1px solid #BBBBBB;
height:10px;
float:left;
margin-top:1px;
position:relative;
}
#prg #p{
background-color:#F9AE3D;
border:1px solid #E87F16;
font-size:1px;
min-height:8px;
max-height:10px;
height:10px;
left:-1px;
position:absolute;
top:-1px;
}
</style>
</head>
<body id='a'>
<div id="prg">
<span class="txt">普通</span>
<div style="width:100px;" class="load" onmousemove="xPrg(this,event)"><span style="width:50%;" id="p"></span></div>
<span class='num'>4324323</span>
</div>
<script type='text/javascript'>
function xPrg(i,e){
var i=$(i);
var p=i.getElementById('p');
if(!i || !p){return false;}
i.setStyle('cursor','pointer');
i.onclick=function(){
alert('點(diǎn)我干啥?');
}
var ex=e.clientX; //鼠標(biāo)現(xiàn)在的位置
var s=p.getPosition().x.toInt(); //原始x偏移量
var bw=i.getStyle('width').toInt(); //進(jìn)度條盒子寬度(px)
var nw=ex-s;nw=(nw>bw)?bw:nw;nw=(nw<1)?0:nw; //鼠標(biāo)所在位置的寬度
p.setStyle('width',nw+'px');
var x=bw/5;
if(nw>0 && nw<=x){
$('prg').getElement('.txt').set('text','非常差');
}else if(nw>x && nw<=(x*2)){
$('prg').getElement('.txt').set('text','很差');
}else if(nw>x && nw<=(x*3)){
$('prg').getElement('.txt').set('text','普通');
}else if(nw>x && nw<=(x*4)){
$('prg').getElement('.txt').set('text','很好');
}else if(nw>x && nw<=(x*5)){
$('prg').getElement('.txt').set('text','非常好');
}
}
</script>
相關(guān)文章
Mootools 1.2教程 設(shè)置和獲取樣式表屬性
今天,我們來(lái)看一下如何通過(guò)MooTools 1.2和我們以前幾講中的內(nèi)容來(lái)操作樣式,這將給你在UI上帶來(lái)很大的控制權(quán)。2009-09-09Mootools 1.2教程 輸入過(guò)濾第一部分(數(shù)字)
今天我們來(lái)看看MooTools是怎樣使得過(guò)濾用戶輸入變得非常輕松。我們今天將講一些基本的數(shù)字過(guò)濾,明天再更深入地講講字符串過(guò)濾。2009-09-09分享一個(gè)用Mootools寫的鼠標(biāo)滑過(guò)進(jìn)度條改變進(jìn)度值的實(shí)現(xiàn)代碼
分享一個(gè)用Mootools寫的鼠標(biāo)滑過(guò)進(jìn)度條改變進(jìn)度值的實(shí)現(xiàn)代碼,需要的朋友可以參考下。2011-12-12MooTools 頁(yè)面滾動(dòng)浮動(dòng)層智能定位實(shí)現(xiàn)代碼
MooTools 頁(yè)面滾動(dòng)浮動(dòng)層智能定位實(shí)現(xiàn)代碼,需要的朋友可以參考下。2011-08-08Mootools 1.2教程(3) 數(shù)組使用簡(jiǎn)介
在上一篇教程——《Mootools 1.2教程(2)——DOM選擇器》中,我們介紹了一下選擇器,其中有很多方法就會(huì)返回?cái)?shù)組(一個(gè)你可以對(duì)其中內(nèi)容進(jìn)行多種操作的特殊列表)。2009-09-09Mootools 1.2教程 輸入過(guò)濾第二部分(字符串)
今天我們來(lái)看一看MooTools給我們提供的額外的一些處理字符函數(shù)。這只是MooTools字符串處理中的一部分,并不包含一些神秘的函數(shù)(比如toCamelCase())和使用正則表達(dá)式處理字符串的函數(shù)。2009-09-09背景圖跟隨鼠標(biāo)移動(dòng)的Mootools插件實(shí)現(xiàn)代碼
背景圖跟隨鼠標(biāo)移動(dòng)的Mootools插件實(shí)現(xiàn)代碼,學(xué)習(xí)mootools的朋友可以參考下。2011-12-12基于mootools插件實(shí)現(xiàn)遮罩層新手引導(dǎo)
公司項(xiàng)目有這個(gè)需求,剛好這段時(shí)間在學(xué)習(xí)了mootools,于是把功能寫成了mootools插件,個(gè)人感覺(jué)mootools在這方面比jquery強(qiáng)多了2012-05-05