用一段js程序來(lái)實(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程序來(lái)實(shí)現(xiàn)動(dòng)畫功能.
csdn首頁(yè)也是如此。。我無(wú)聊,自己寫了一個(gè),特點(diǎn)如下:
1.對(duì)搜索引擎友好
2.對(duì)美工友好,因?yàn)閿?shù)據(jù)和代碼是分開的,完全不懂js的都可以用fontpage修改動(dòng)畫內(nèi)容
可以把js代碼保存為一個(gè)文件 然后<script src="1.js"></script>,然后無(wú)須修改代碼一個(gè)字母
就可以在多個(gè)頁(yè)面中實(shí)現(xiàn)動(dòng)畫了
代碼如下:
<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," "].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>
許許多多的網(wǎng)站都撤掉了以前的flash動(dòng)畫,改用一段js程序來(lái)實(shí)現(xiàn)動(dòng)畫功能.
csdn首頁(yè)也是如此。。我無(wú)聊,自己寫了一個(gè),特點(diǎn)如下:
1.對(duì)搜索引擎友好
2.對(duì)美工友好,因?yàn)閿?shù)據(jù)和代碼是分開的,完全不懂js的都可以用fontpage修改動(dòng)畫內(nèi)容
可以把js代碼保存為一個(gè)文件 然后<script src="1.js"></script>,然后無(wú)須修改代碼一個(gè)字母
就可以在多個(gè)頁(yè)面中實(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," "].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>
相關(guān)文章
關(guān)聯(lián)的Select,可以支持客戶端動(dòng)態(tài)更新
關(guān)聯(lián)的Select,可以支持客戶端動(dòng)態(tài)更新...2006-09-09JS使用正則表達(dá)式獲取小括號(hào)、中括號(hào)及花括號(hào)內(nèi)容的方法示例
這篇文章主要介紹了JS使用正則表達(dá)式獲取小括號(hào)、中括號(hào)及花括號(hào)內(nèi)容的方法,涉及javascript針對(duì)三種括號(hào)正則匹配的相關(guān)操作技巧,需要的朋友可以參考下2018-06-06javascript宿主對(duì)象之window.navigator詳解
這篇文章主要為大家詳細(xì)介紹了javascript宿主對(duì)象之window.navigator,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-09-09JavaScript實(shí)現(xiàn)MIPS乘法模擬的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)MIPS乘法模擬的方法,實(shí)例分析了JavaScript實(shí)現(xiàn)MIPS乘法模擬的運(yùn)算技巧,需要的朋友可以參考下2015-04-04JavaScript實(shí)現(xiàn)刷新不重記的倒計(jì)時(shí)
網(wǎng)上關(guān)于JavaScript實(shí)現(xiàn)倒計(jì)時(shí)的文章有很多,但是一般都是刷新后會(huì)重新開始計(jì)時(shí),可是我們有的時(shí)候會(huì)需要刷新卻不重新計(jì)算的倒計(jì)時(shí),這該怎么做呢?下面我們一起來(lái)看看這種倒計(jì)時(shí)怎么實(shí)現(xiàn)吧。2016-08-08bootstrap里bootstrap動(dòng)態(tài)加載下拉框的實(shí)例講解
今天小編就為大家分享一篇bootstrap里bootstrap動(dòng)態(tài)加載下拉框的實(shí)例講解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2018-08-08TypeScript類型系統(tǒng)自定義數(shù)據(jù)類型教程示例
這篇文章主要為大家介紹了TypeScript類型系統(tǒng)自定義數(shù)據(jù)類型教程示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11