用一段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 相关文章推荐
jquery表单验证使用插件formValidator
Nov 10 Javascript
jQuery获取当前对象标签名称的方法
Feb 07 Javascript
jQuery的$.proxy()应用示例介绍
Apr 03 Javascript
浅谈javascript中基本包装类型
Jun 03 Javascript
JavaScript中Number.NEGATIVE_INFINITY值的使用详解
Jun 05 Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
Jul 26 Javascript
Angularjs分页查询的实现
Feb 24 Javascript
vue 国际化 vue-i18n 双语言 语言包
Jun 07 Javascript
代码实例ajax实现点击加载更多数据图片
Oct 12 Javascript
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
Dec 11 Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
Jan 20 Javascript
微信小程序用户盒子、宫格列表的实现
Jul 01 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
Discuz! Passport 通行证整合
2008/03/27 PHP
PHP调用Linux的命令行执行文件压缩命令
2013/01/27 PHP
php显示时间常用方法小结
2015/06/05 PHP
PHP实现阿里大鱼短信验证的实例代码
2017/07/10 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
PHP ob缓存以及ob函数原理实例解析
2020/11/13 PHP
基于Jquery与WebMethod投票功能实现代码
2011/01/19 Javascript
js+xml生成级联下拉框代码
2012/07/24 Javascript
treepanel动态加载数据实现代码
2012/12/15 Javascript
jquery实现的一个文章自定义分段显示功能
2014/05/23 Javascript
jquery插件Jplayer使用方法简析
2016/04/22 Javascript
jQuery 实现评论等级好评差评特效
2016/05/06 Javascript
jQuery添加和删除输入文本框标签代码
2016/05/20 Javascript
浅谈jQuery before和insertBefore的区别
2016/12/04 Javascript
AugularJS从入门到实践(必看篇)
2017/07/10 Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
2017/07/13 Javascript
vue自定义指令directive实例详解
2018/01/17 Javascript
jQuery中each方法的使用详解
2018/03/18 jQuery
Nuxt升级2.0.0时出现的问题(小结)
2018/10/08 Javascript
微信小程序日历组件使用方法详解
2018/12/29 Javascript
JS实现数组深拷贝的方法分析
2019/03/06 Javascript
validform表单验证的实现方法
2019/03/08 Javascript
python命令行参数解析OptionParser类用法实例
2014/10/09 Python
Python3的介绍、安装和命令行的认识(推荐)
2018/10/20 Python
python3实现zabbix告警推送钉钉的示例
2019/02/20 Python
详解用pyecharts Geo实现动态数据热力图城市找不到问题解决
2019/06/26 Python
python实现静态web服务器
2019/09/03 Python
CSS3中的注音对齐属性ruby-align用法指南
2016/07/01 HTML / CSS
英国第一的购买便宜玩具和游戏的在线购物网站:Bargain Max
2018/01/24 全球购物
小班开学寄语
2014/04/04 职场文书
男女朋友协议书
2014/04/23 职场文书
初中政治教师教学反思
2016/02/23 职场文书
怎样写好工作计划
2019/04/10 职场文书
关于党风廉政建设宣传教育月的活动总结!
2019/08/08 职场文书
AJAX实现指定部分页面刷新效果
2021/10/16 Javascript
python机器学习创建基于规则聊天机器人过程示例详解
2021/11/02 Python