用一段js程序來實(shí)現(xiàn)動(dòng)畫功能

更新時(shí)間：2007年03月06日 00:00:00 作者：

自從ie對(duì)flash的顯示方式進(jìn)行改變后，flash這個(gè)東西一下子變成了一個(gè)雞肋。
許許多多的網(wǎng)站都撤掉了以前的flash動(dòng)畫，改用一段js程序來實(shí)現(xiàn)動(dòng)畫功能.

csdn首頁也是如此。。我無聊，自己寫了一個(gè)，特點(diǎn)如下：

1.對(duì)搜索引擎友好
2.對(duì)美工友好，因?yàn)閿?shù)據(jù)和代碼是分開的，完全不懂js的都可以用fontpage修改動(dòng)畫內(nèi)容

可以把js代碼保存為一個(gè)文件然后<script src="1.js"></script>,然后無須修改代碼一個(gè)字母
就可以在多個(gè)頁面中實(shí)現(xiàn)動(dòng)畫了

代碼如下:

復(fù)制代碼代碼如下:

<style>  
#g_div{text-align:right;overflow:hidden}  
.b{width:24px; height:16px; background:#737373; font-size:14px; font-weight:bold; color:#fff; text-decoration:none;margin-left:1px}  
.b:hover{width:24px; height:16px; background:#780001; font-size:14px; font-weight:bold; color:#fff; text-decoration:none;margin-left:1px}  
.bhover{width:24px; height:16px; background:#780001; font-size:14px; font-weight:bold; color:#fff; text-decoration:none;margin-left:1px}  
</style>  

<div id="g_div" style="width:270px;height:252px"><a   
href="#" target=_blank><img   
id="g_img" style="FILTER:revealTrans(duration=1,transition=23);width:266px;height:220px;border:1px green solid" src="http://zi.csdn.net/xian.gif">  
</a><a   
>1.CSDN程序員</a><a   
>2.CSDN程序員</a><a   
>3.CSDN程序員</a><a   
>4.CSDN程序員</a><a   
>5.CSDN程序員</a>  
</div>  

<script language="JavaScript">  
function f(){  
 var g_sec=3          //幾秒后切換圖片  
 var g_items=new Array()  
 var g_div=document.getElementById("g_div")   
 var g_img=document.getElementById("g_img")   
 var g_imglink=g_img.parentElement  
 var arr=g_div.getElementsByTagName("A")  
 var arr_length=arr.length  
 var g_index=1   

 var show_img=function(n){     
   if (/\d+/.test(n)){    
  var prev=g_index+1  
  g_index=n-1  
   }else{      
  var prev=(g_index>arr.length)?(arr_length-1):g_index+1  
  g_index=(g_index<arr_length-2)?(++g_index):0  
   }    
   if (document.all){  
    g_img.filters.revealTrans.Transition=23;  
   g_img.filters.revealTrans.apply();  
   g_img.filters.revealTrans.play();  
    }  
  arr[prev].className="b"     
  arr[g_index+1].className="bhover"  
  g_img.src=g_items[g_index].img.src  
  g_img.title=g_items[g_index].txt  
  g_imglink.href=g_items[g_index].url     
  g_imglink.target=g_items[g_index].target  

 }  

 for(var i=1;i<arr_length;i++){  
  g_items.push({txt:arr[i].innerHTML,  
   url:arr[i].href,  
   target:arr[i].target,  
   img:(function(){var o=new Image;o.src=arr[i].getAttribute("for");return o})()})   
  arr[i].title=arr[i].innerHTML  
  arr[i].innerHTML=[i,"&nbsp;"].join("")  
  arr[i].className="b"  
  arr[i].onclick=function(){  
   event.returnValue=false;   
   show_img(event.srcElement.innerText)    
  }  
 }  
 show_img(1)    
 var t=window.setInterval(show_img,g_sec*1000)   
 g_img.onmouseover=function(){window.clearInterval(t)}  
 g_img.onmouseout=function(){t=window.setInterval(show_img,g_sec*1000)}    
}  

window.attachEvent("onload",f)   
</script> 