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="FILTER:revealTrans(duration=1,transition=23);width:266px;height:220px;border:1px 녹색 단색" src="http://zi.csdn.net/xian.gif" >
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程序员
function f () { 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 }
if (문서 .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 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," "].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)
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
