热门源码
|
热门软件
|
高级搜索
|
网站地图
|
文章
·
软件投稿
免费收录你的网站,现在加入广捷居!
庆祝Admin5·站长网广告联盟开通,抢先注册中.
CSS代码在线格式化、美化工具
首页
站长资讯
源码下载
素材图库
脚本特效
电子书籍
专题
开源者社区
智能模糊搜索
资源名称检索
本站推荐
:
共享世纪推荐的2010·互联网建站品牌CMS
Windows/Linux高性能主机
2G 155元,3G 198元,5G 300元,欢迎联系本站站长选购!
图片切换的幻灯效果,带滑动文字层
脚本类别:
图形特效
添加时间:
2009-02-06
查看次数:
作者:
高飞的小鸟
脚本代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>滑动说明文字</title> <style type="text/css" media="all"> .bg{border:#999999 3px solid;width:207px;height:106px;position:relative;overflow:hidden;float:left;margin-right:6px;} .img{background-image:url(/Pri_upfile/jspic/2009/slide_intro.jpg);width:207px;height:106px;} .txt{width:197px;height:96px;background-color:#000000;position:absolute;top:106px;left:0px;color:#FFCC33;line-height:22px;padding:5px;font-size:12px;} </style> <script language="javascript" type="text/javascript"> /****************************** Power By:http://www.wxwdesign.cn *******************************/ var div=document.getElementsByTagName("div"); var elem=new Array(); //存储已经初始化的对象 var status=new Array(); //存储对象状态 var interval=10; //滑动速度 var opacity=69; //内容图层透明度 //run_animation var d=function(){ var timer=0,div; var ypos=100; this.go_up=function(con,target){timer=setInterval(con.up,interval);div=target;div.style.filter="alpha(opacity="+opacity+")";div.style.opacity=opacity/100;} this.go_down=function(con){timer=setInterval(con.down,interval)} this.up=function(){if(ypos<=0){clearInterval(timer);div.style.top="0px";}else{ypos-=10;div.style.top=ypos+"px";}} this.down=function(){if(ypos>=106){clearInterval(timer);div.style.top="106px";}else{ypos+=10;div.style.top=ypos+"px";}} this.pause=function(){clearInterval(timer);} } //start var c={ up:function(tar){if(status[tar]==tar){elem[tar].pause();elem[tar].go_up(elem[tar],div[tar]);}else{var n=tar;tar=new d();elem[n]=tar;status[n]=n;tar.go_up(tar,div[n]);}}, pause:function(tar){elem[tar].pause();}, down:function(tar){if(elem[tar]!=undefined){elem[tar].pause();elem[tar].go_down(elem[tar])}} } //initial window.onload=function(){for(var i=0;i<div.length;i+=3){div[i+1].index=div[i+2].index=i+2;div[i+1].onmouseover=function(){c.up(this.index)};div[i+2].onmouseout=function(){c.down(this.index)}}} </script> </head> <body> <div class="bg"> <div class="img"></div> <div class="txt">图片1:<br />下面是测试说明1,文字内容1。</div> </div> <div class="bg"> <div class="img"></div> <div class="txt">图片22:<br />下面是测试说明2,<a href="http://www.2ky.cn">共享世纪</a>。</div> </div> <div class="bg"> <div class="img"></div> <div class="txt">图片333:<br />下面是测试说明4,文字内容3。</div> </div> <div class="bg"> <div class="img"></div> <div class="txt">图片44444:<br />下面是测试说明4,文字内容4。</div> </div> </body> </html>
loading...
当前页面所处路径为
共享世纪
/
脚本特效
/
图形特效
/ ,本特效的Tag为:
共享世纪
会员登陆
close X
用户名
密 码
验证码