用一段js程序来实现动画功能
用一段js程序来实现动画功能
发布时间:2016-12-30 来源:查字典编辑
摘要:自从ie对flash的显示方式进行改变后,flash这个东西一下子变成了一个鸡肋。许许多多的网站都撤掉了以前的flash动画,改用一段js程...

自从ie对flash的显示方式进行改变后,flash这个东西一下子变成了一个鸡肋。

许许多多的网站都撤掉了以前的flash动画,改用一段js程序来实现动画功能.

csdn首页也是如此。。我无聊,自己写了一个,特点如下:

1.对搜索引擎友好

2.对美工友好,因为数据和代码是分开的,完全不懂js的都可以用fontpage修改动画内容

可以把js代码保存为一个文件然后<scriptsrc="1.js"></script>,然后无须修改代码一个字母

就可以在多个页面中实现动画了

代码如下:

复制代码 代码如下:

<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>

<divid="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:1pxgreensolid"src="http://zi.csdn.net/xian.gif">

</a><a

href="http://www.baidu.com/"for="http://zi.csdn.net/xian.gif"target="_blank">1.CSDN程序员</a><a

href="http://www.126.com/"for="http://zi.csdn.net/microsoft280_187.jpg"target="_blank">2.CSDN程序员</a><a

href="http://mp3.baidu.com/"for="http://zi.csdn.net/live.gif"target="_blank">3.CSDN程序员</a><a

href="http://post.baidu.com/"for="http://zi.csdn.net/new-mba.gif"target="_blank">4.CSDN程序员</a><a

href="http://top.baidu.com/"for="http://zi.csdn.net/book.jpg"target="_blank">5.CSDN程序员</a>

</div>

<scriptlanguage="JavaScript">

functionf(){

varg_sec=3//几秒后切换图片

varg_items=newArray()

varg_div=document.getElementById("g_div")

varg_img=document.getElementById("g_img")

varg_imglink=g_img.parentElement

vararr=g_div.getElementsByTagName("A")

vararr_length=arr.length

varg_index=1

varshow_img=function(n){

if(/d+/.test(n)){

varprev=g_index+1

g_index=n-1

}else{

varprev=(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(vari=1;i<arr_length;i++){

g_items.push({txt:arr[i].innerHTML,

url:arr[i].href,

target:arr[i].target,

img:(function(){varo=newImage;o.src=arr[i].getAttribute("for");returno})()})

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)

vart=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>

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类