首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

用mootools怎样做数字的渐变呢~解决思路

2012-03-06 
用mootools怎样做数字的渐变呢~????我想在页面上显示一个柱形图,它的width由0px到500px,在过度的同时在后

用mootools怎样做数字的渐变呢~????
我想在页面上显示一个柱形图,它的width由0px到500px,在过度的同时在后面显示不断变化的数字,数字的过度要和图的过度效果是一致的,比如把<span>中的数字0过度到99,下面是代码 

HTML code
<div style="height: 25px; width: 0px; background:url('a.gif');" id="tdiv2"></div>  <span>0</span> 


JScript code
var tdiv2 = new Fx.Styles('tdiv1', {duration: 1000,transition: Fx.Transitions.Quad.easeInOut});     tdiv2.start({           'width' : [0,500],           'opacity' : [0,1]       });  


[解决办法]

function showPercent()
{
var obj = $("tdiv2");
obj.nextSibling.innerText = (parseInt(obj.style.width)/500 * 100).toFixed(0) + "%";
}

setInterval("showPercent()",10);

热点排行