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


Posted in Javascript onMarch 06, 2007

自从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," "].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> 
Javascript 相关文章推荐
javascript中数组的concat()方法使用介绍
Dec 18 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
Sep 18 Javascript
利用Node.JS实现邮件发送功能
Oct 21 Javascript
JavaScript中定义对象原型的两种使用方法
Dec 15 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
Mar 06 Javascript
了解VUE的render函数的使用
Jun 08 Javascript
VUE中使用Vue-resource完成交互
Jul 21 Javascript
微信小程序云开发修改云数据库中的数据方法
May 18 Javascript
JS利用prototype给类添加方法操作详解
Jun 21 Javascript
Vue3.0中的monorepo管理模式的实现
Oct 14 Javascript
js动态添加带圆圈序号列表的实例代码
Feb 18 Javascript
JavaScript 生成唯一ID的几种方式
Feb 19 Javascript
用javascript动态调整iframe高度的方法
Mar 06 #Javascript
静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。
Mar 06 #Javascript
限制文本字节数js代码
Mar 06 #Javascript
用Div仿showModalDialog模式菜单的效果的代码
Mar 05 #Javascript
HTML-CSS群中单选引发的“事件”
Mar 05 #Javascript
用javascript实现页面打印的三种方法
Mar 05 #Javascript
一个可以显示阴历的JS代码
Mar 05 #Javascript
You might like
Gregarius中文日期格式问题解决办法
2008/04/22 PHP
PHP中foreach循环中使用引用要注意的地方
2011/01/02 PHP
PHP解压ZIP文件到指定文件夹的方法
2016/11/17 PHP
Zend Framework实现自定义过滤器的方法
2016/12/09 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
一个对于Array的简单扩展
2006/10/03 Javascript
Prototype使用指南之selector.js说明
2008/10/26 Javascript
JavaScript arguments 多参传值函数
2010/10/24 Javascript
js关于字符长度限制的问题示例探讨
2014/01/24 Javascript
javascript的replace方法结合正则使用实例总结
2016/06/16 Javascript
AngularJS轻松实现双击排序的功能
2016/08/30 Javascript
AngularJs directive详解及示例代码
2016/09/01 Javascript
如何利用JQuery实现从底部回到顶部的功能
2016/12/27 Javascript
javascript阻止事件冒泡和浏览器的默认行为
2017/01/21 Javascript
微信小程序 空白页重定向解决办法
2017/06/27 Javascript
妙用缓存调用链实现JS方法的重载
2018/04/30 Javascript
如何使用JavaScript实现栈与队列
2019/06/24 Javascript
Angular+ionic实现折叠展开效果的示例代码
2020/07/29 Javascript
[02:13] 完美世界DOTA2联赛PWL DAY5集锦
2020/11/03 DOTA
Python学习资料
2007/02/08 Python
Python中用pycurl监控http响应时间脚本分享
2015/02/02 Python
Python数组遍历的简单实现方法小结
2016/04/27 Python
实例讲解Python中SocketServer模块处理网络请求的用法
2016/06/28 Python
Python编程判断这天是这一年第几天的方法示例
2017/04/18 Python
Python3实现购物车功能
2018/04/18 Python
Windows 64位下python3安装nltk模块
2018/09/19 Python
详解PyCharm安装MicroPython插件的教程
2019/06/24 Python
pandas中的series数据类型详解
2019/07/06 Python
Python tkinter三种布局实例详解
2020/01/06 Python
python游戏开发的五个案例分享
2020/03/09 Python
哪些是python中web开发框架
2020/06/17 Python
美国在线购物频道:Shop LC
2019/04/21 全球购物
Derek Rose官网:英国高档睡衣、家居服和内衣品牌
2020/01/18 全球购物
怎样写离婚协议书
2014/09/10 职场文书
停车场管理协议书范本
2014/10/08 职场文书
Matplotlib可视化之添加让统计图变得简单易懂的注释
2021/06/11 Python