用一段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 获得选中文本内容的方法
Feb 15 Javascript
CheckBoxList多选样式jquery、C#获取选择项
Sep 06 Javascript
jQuery 删除/替换DOM元素的几种方式
May 20 Javascript
JavaScript中的全局对象介绍
Jan 01 Javascript
JavaScript原生对象之Date对象的属性和方法详解
Mar 13 Javascript
JavaScript调用客户端Java程序的方法
Jul 27 Javascript
JS 对java返回的json格式的数据处理方法
Dec 05 Javascript
React.Js添加与删除onScroll事件的方法详解
Nov 03 Javascript
vue的全局提示框组件实例代码
Feb 26 Javascript
小程序从手动埋点到自动埋点的实现方法
Jan 24 Javascript
微信小程序 scroll-view 水平滚动实现过程解析
Oct 12 Javascript
关于JavaScript数组去重的一些理解汇总
Sep 10 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
同时提取多条新闻中的文本一例
2006/10/09 PHP
php实现mysql数据库备份类
2008/03/20 PHP
PHP设置图片文件上传大小的具体实现方法
2013/10/11 PHP
PHP正则替换函数preg_replace()报错:Notice Use of undefined constant的解决方法分析
2017/02/04 PHP
PHP简单读取xml文件的方法示例
2017/04/20 PHP
PHP5中使用mysqli的prepare操作数据库的介绍
2019/03/18 PHP
jquery 圆形旋转图片滚动切换效果
2011/01/19 Javascript
javascript五图轮播切换实用版
2012/08/17 Javascript
仿新浪微博登陆邮箱提示效果的js代码
2013/08/02 Javascript
js动态改变select选择变更option的index值示例
2014/07/10 Javascript
javascript元素动态创建实现方法
2015/05/13 Javascript
JavaScript中的setMilliseconds()方法使用详解
2015/06/11 Javascript
理解javascript封装
2016/02/23 Javascript
Javascript的表单与验证-非空验证
2016/03/18 Javascript
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
2016/06/22 Javascript
JSON字符串和JSON对象相互转化实例详解
2017/01/05 Javascript
Java设计中的Builder模式的介绍
2018/03/22 Javascript
详解vue 数据传递的方法
2018/04/19 Javascript
jQuery实现checkbox全选功能完整实例
2018/07/12 jQuery
Vue动态加载异步组件的方法
2018/11/21 Javascript
Node.js实现简单管理系统
2019/09/23 Javascript
使用webpack/gulp构建TypeScript项目的方法示例
2019/12/18 Javascript
Jquery Datatables的使用详解
2020/01/30 jQuery
[41:05]Serenity vs Pain 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python实现读取大文件并逐行写入另外一个文件
2018/04/19 Python
Python日期时间模块datetime详解与Python 日期时间的比较,计算实例代码
2018/09/14 Python
python 获得任意路径下的文件及其根目录的方法
2019/02/16 Python
简单了解python PEP的一些知识
2019/07/13 Python
python基于socket进行端口转发实现后门隐藏的示例
2019/07/25 Python
利用pandas将非数值数据转换成数值的方式
2019/12/18 Python
CSS3新属性transition-property transform box-shadow实例学习
2013/06/06 HTML / CSS
班级年度安全计划书
2014/05/01 职场文书
收入及婚姻状况证明
2014/11/20 职场文书
通报表扬范文
2015/01/17 职场文书
文艺晚会开场白
2015/05/29 职场文书
心灵捕手观后感
2015/06/02 职场文书