<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>Document</title>
????<style?type="text/css">
????*{margin:?0px;padding:?0px;}
????.box{width:?400px;height:?60px;margin:200px?auto;border:?1px?solid?#1C1818;position:?relative;}
????.list{list-style:?none;}
????.list?li{position:?absolute;width:?40px;height:?60px;text-align:?center;line-height:?60px;?top:?0;opacity:?1;filter:alpha(opacity=100);}
????.rate{height:?60px;background-color:?#C30C0C;width:?0px;position:?absolute;left:?0px;z-index:?-100}
????</style>
</head>
<body>
????<div>
????????<div?id="div"></div>
????????<ul?id="list">
????????????<li>+1</li>
????????????<li>+1</li>
????????????<li>+1</li>
????????????<li>+1</li>
????????????<li>+1</li>
????????????<li>+1</li>
????????????<li>+1</li>
????????????<li>+1</li>
????????????<li>+1</li>
????????????<li>+1</li>
????????</ul>
????</div>
????<script>
????????window.onload?=?function(){
????????????var?oList?=?document.getElementById('list');
????????????var?oDiv?=?document.getElementById('div');
????????????var?aLi?=?oList.getElementsByTagName('li');
????????????var?timer1?=?null;
????????????var?timer2?=?null;
????????????var?timer3?=?null;
????????????var?onOff?=?true;
????????????var?num?=?0;
????????????var?alpha?=?100;
????????????var?iNow?=?1;
????????????for?(var?i?=?0;?i?<?aLi.length;?i++)?{
????????????????aLi[i].style.left?=?i*40+'px';
????????????}
????????????document.onclick?=?function(){
????????????????if?(onOff)?{onOff=?false;fn1();fn2();fn3()}
????????????}
????????????function?getStyle(obj,attr){
????????????return?obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
????????????}
????????????
????????????function?doMove(obj,attr,dir,target){
????????????????dir?=?parseInt(getStyle(obj,attr))<target?dir:-dir;
????????????????clearInterval(obj.timer);
????????????????setInterval(function(){
????????????????????var?speed?=?parseInt(getStyle(obj,attr))+dir;
????????????????????if?(speed>target&&dir>0?||?speed<target&&dir<0)?
????????????????????????{speed=?target;}
????????????????????obj.style[attr]?=?speed+'px';
????????????????????if?(speed?==?target)?{clearInterval(obj.timer);}
????????????????},100)
????????????}
????????????function?fn1(){????
????????????????//var?count?=?0;
????????????????clearInterval(timer1);
????????????????timer1?=?setInterval(function(){
????????????????????doMove(aLi[num],'top',-30,-200);
????????????????????num++;
????????????????????if?(num?==?aLi.length)?{
????????????????????????clearInterval(timer1);????????????????????????
????????????????????}
????????????????},100)
????????????}
????????????function?fn2(){
????????????????var?count?=?1;
????????????????clearInterval(timer2);
????????????????timer2?=?setInterval(function(){
????????????????????oDiv.style.width?=?count*40+'px';//alert(1);
????????????????????count++;
????????????????????if?(count?==?11)?{clearInterval(timer2);}
????????????????},100)
????????????}
????????????function?fn3(){
????????????????//透密度漸變消失
????????????????
????????????????????????}
????????????????},30)
????????????}
????????????
????????}
????</script>
</body>
</html>
怎么然數(shù)字漸變消失
羅富文1995ing
2016-04-17 20:34:37
