js 프로그램을 사용하여 애니메이션 function_javascript 기술 구현

IE가 플래시 표시 방식을 바꾼 이후로 플래시는 갑자기 쓸모없는 것이 되었습니다.
많은 웹사이트가 기존 플래시 애니메이션을 제거하고 대신 js 프로그램을 사용하여 애니메이션 기능을 구현하고 있습니다.

csdn 홈페이지도 마찬가지입니다. . 심심해서 다음과 같은 특징으로 직접 작성해봤습니다.

1. 검색엔진 친화적
2. 데이터와 코드가 분리되어 있어 아티스트에게 친숙하고, 이해하지 못하는 분들에게도 JS에서는 글꼴 페이지를 사용하여 수정할 수 있습니다.

js 코드를 파일로 저장한 다음 단 한 글자의 코드 수정 없이 여러 페이지에 표시됩니다.
애니메이션은


에서 구현됩니다. 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

 
#g_div{text-align:right;overflow:hidden} 
.b{너비:24px; 높이:16px; 배경:#737373; 글꼴 크기:14px; 글꼴 두께:굵게; 색상:#fff; 텍스트 장식:없음;여백-왼쪽:1px} 
.b:hover{너비:24px; 높이:16px; 배경:#780001; 글꼴 크기:14px; 글꼴 두께:굵게; 색상:#fff; 텍스트 장식:없음;여백-왼쪽:1px} 
.bhover{너비:24px; 높이:16px; 배경:#780001; 글꼴 크기:14px; 글꼴 두께:굵게; 색상:#fff; 텍스트 장식:없음;여백-왼쪽:1px} 
 

href="#" target=_blank>id= "g_img"  style="max-width:90%"  > 
href="http://www.baidu.com/" for="http://zi.csdn.net/xian.gif"  target="_blank" >1.CSDN程序员href="http://www.126.com/" for="http://zi.csdn.net/microsoft280_187.jpg"  대상 ="_blank">2.CSDN程序员href="http://mp3.baidu.com/"  for="http://zi.csdn.net/live .gif"   target="_blank">3.CSDN程序员href="http://post.baidu.com/" for="http://zi.csdn .net/new-mba.gif"  target="_blank">4.CSDN程序员href="http://top.baidu.com/" for="http ://zi.csdn.net/book.jpg"  target="_blank">5.CSDN程序员 

 

<script>  <))> function f () {<🎜 🎜 var g_sec = 3 // 几秒后切换图片 <🎜 🎜 var g_items = new Array () <🎜🎜> var g_div = document.getElementById ( "g_div") <BR> var g_img=document.getElementById("g_img")   <BR> var g_imglink=g_img.parentElement  <BR> var arr=g_div.getElementsByTagName("A")  <BR> var arr_length=arr.length  <BR> var g_index=1   <BR><BR> var show_img=function(n){     <BR>   if (/d /.test(n)){    <BR>  var prev=g_index 1  <br>  g_index=n-1  <br>   }else{ <BR>  var prev=(g_index>arr.length)?(arr_length-1):g_index 1  <BR>  g_index=(g_index<arr_length-2)?( g_index):0  <BR>   }    <BR>   if (문서 .all){  <BR>    g_img.filters.revealTrans.Transition=23;  <BR>   g_img.filters.revealTrans.apply();  <BR>   g_img.filters.revealTrans.play();  <BR>    }  <BR>  arr[prev].className="b"     <BR>  arr[g_index 1].className="bhover"  <BR>  g_img.src=g_items[g_index].img.src  <BR>  g_img .title=g_items[g_index].txt  <BR>  g_imglink.href=g_items[g_index].url     <BR>  g_imglink.target=g_items[g_index].target  <BR><BR> }  <BR><BR> for( var i=1;i<arr_length;i ){  <br>  g_items.push({txt:arr[i].innerHTML,  <br>   url:arr[i].href,  <br>   target:arr[i] .target,  <br>   img:(function(){var o=new Image;o.src=arr[i].getAttribute("for");return o})()})   <BR>  arr[i] .title=arr[i].innerHTML  <BR>  arr[i].innerHTML=[i," "].join("")  <BR>  arr[i].className="b"  <BR>  arr[i ].onclick=function(){  <BR>   event.returnValue=false;   <BR>   show_img(event.srcElement.innerText)    <BR>  }  <BR> }  <BR> show_img(1)    <BR> var t=window.setInterval(show_img,g_sec*1000)   <BR> g_img.onmouseover=function (){window.clearInterval(t)}  <BR> g_img.onmouseout=function(){t=window.setInterval(show_img,g_sec*1000)}    <BR>}  <BR><BR>window.attachEvent("onload ",f)   <BR></script>