用一段js程序来实现动画功能

所属分类: 网络编程 / JavaScript 阅读数: 848
收藏 0 赞 0 分享
自从ie对flash的显示方式进行改变后,flash这个东西一下子变成了一个鸡肋。
许许多多的网站都撤掉了以前的flash动画,改用一段js程序来实现动画功能.

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

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

可以把js代码保存为一个文件 然后<script src="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> 

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

<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> 
更多精彩内容其他人还在看

Node.js事件的正确使用方法

这篇文章主要给大家介绍了关于Node.js事件的正确使用方法,文中通过示例代码介绍的非常详细,对大家学习或者使用Node.js具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
收藏 0 赞 0 分享

微信小程序自定义导航栏实例代码

这篇文章主要给大家介绍了关于微信小程序自定义导航栏的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用微信小程序具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
收藏 0 赞 0 分享

js字符串处理之绝妙的代码

这篇文章主要介绍了js字符串处理之绝妙的代码,包括字符串去重、将字符放在对象中遍历拼接出字符串、把字符串的奇数位和偶数位分别提取到两个数组中、将两个数组按奇数位和偶数位插入拼接为字符串,有时候需要对字符进行处理的时候可以用得到
收藏 0 赞 0 分享

vue设计一个倒计时秒杀的组件详解

这篇文章主要介绍了vue设计一个倒计时秒杀的组件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

详解服务端预渲染之Nuxt(介绍篇)

这篇文章主要介绍了详解服务端预渲染之Nuxt(介绍篇),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

javascrit中undefined和null的区别详解

这篇文章主要介绍了javascrit中undefined和null的区别详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

浅谈javascript中的prototype和__proto__的理解

这篇文章主要介绍了浅谈javascript中的prototype和__proto__的理解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

详解vue中this.$emit()的返回值是什么

这篇文章主要介绍了详解vue中this.$emit()的返回值是什么,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

浅谈express.js框架中间件(middleware)

这篇文章主要介绍了浅谈express.js框架中间件(middleware),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue自定义指令directive的使用方法

这篇文章主要介绍了vue自定义指令directive的使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享
查看更多