一个不错的给图片添加说明文字的动态层的实现代码

更新时间：2013年04月17日 18:19:58 作者：

一个不错的给图片添加说明文字的动态层的实现代码，需要的朋友可以参考下

<!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"> .slide_bg{border:#999999 3px solid;width:207px;height:106px;position:relative;overflow:hidden;float:left;margin-right:16px;margin-top:26px;} .slide_img{background-image:url(/jscss/demoimg/wall1.jpg);width:207px;height:106px;} .slide_txt{width:197px;height:100px;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"> var slide_content=function(){ var id="slide_content" //滑动图片父容器的id名 var interval=10; //滑动速度 var interval2=100; //文字滑出延迟时间(毫秒) var interval3=500; //文字内容自动消失的延迟时间(毫秒) var opacity=69; //文字内容图层透明度 var timer2=new Array(); var elem=new Array(); var status=new Array(); var div=document.getElementById(id).getElementsByTagName("div"); var timer3=0; //run_animation var d=function(){ var timer,obj,txt;var ypos=100; this.run=function(pra1,pra2,dir){obj=pra1;txt=pra2;if(dir>0){clearTimeout(timer);clearTimeout(timer3);timer3=setTimeout(obj.up,interval2);}else{clearTimeout(timer);obj.down()};txt.style.filter="alpha(opacity="+opacity+")";txt.style.opacity=opacity/100;} //向上滑动 this.up=function(){if(ypos<=0){txt.style.top="0px"}else{ypos-=10;txt.style.top=ypos+"px";timer=setTimeout(obj.up,interval)}} //向下滑动 this.down=function(){if(ypos>=106){txt.style.top="106px";}else{ypos+=15;txt.style.top=ypos+"px";timer=setTimeout(obj.down,interval)}} } //init mouse_behavior for(var i=0;i<div.length;i+=3){ div[i+1].index=div[i+2].index=i+2; elem[i+2]=new d(); div[i+1].onmouseover=function(){elem[this.index].run(elem[this.index],div[this.index],1)}; div[i+1].onmouseout=function(){var n=this.index;if(status[n]!=1){timer2[n]=setTimeout(imgout,interval3)};function imgout(){elem[n].run(elem[n],div[n],-1)}} div[i+2].onmouseout=function(){elem[this.index].run(elem[this.index],div[this.index],-1);status[this.index]=0} div[i+2].onmouseover=function(){clearTimeout(timer2[this.index]);status[this.index]=1} } } //网页加载完毕时，启动函数 window.onload=slide_content; </script> </head> <body> <div id="slide_content"> <div class="slide_bg"> <div class="slide_img"></div> <div class="slide_txt">春天：<br>春天是播种的季节。</div> </div> <div class="slide_bg"> <div class="slide_img"></div> <div class="slide_txt">夏天：<br>夏天是火热的季节。</div> </div> <div class="slide_bg"> <div class="slide_img"></div> <div class="slide_txt">秋天：<br>秋天是丰收的季节。</div> </div> <div class="slide_bg"> <div class="slide_img"></div> <div class="slide_txt">冬天：<br>冬天是雷人的季节。</div> </div> </div> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

比较不错的一款图片广告效果
比较不错的一款图片广告效果...
2007-06-06
js 上传图片预览问题
我们写网页的时候一般的用IE进行开发，一般的人都是按照IE进行些程序，做网站的时候遇到浏览器兼容问题是非常烦躁的事情。
2010-12-12
DHTML Slide Show script图片轮换
2008-03-03
JavaScript图片放大镜效果代码[代码比较简单]
实用漂亮的放大镜效果，基于JavaScript代码实现，貌似代码不太多，但效果确实不错，因调用的图片比较大，所以运行效果后请稍等一会，等待图片加载。
2011-02-02
js实现运动logo图片效果及运动元素对象sportBox使用方法
Js实现运动的图片特效，两个网站Logo快速运动类似显示器屏保。借此练习运动元素对象sportBox的使用方法，需要了解的朋友可以参考下
2012-12-12
JavaScript 图片放大效果及代码说明
JavaScript 图片放大效果及代码说明 ,想要学习的朋友可以参考下。
2009-10-10
常见JS效果之图片减速度滚动实现代码
图片减速度滚动,一般用于产品的展示效果。作为前端，互联网上一些常见效果都要尝试去实现，不能因为公司用不到就不做。
2011-12-12
网页特效从下往上过渡共享图库_最新图片
非常不错的应用，图片的轮换效果，用于一些图片的现实。
2009-04-04
北京奥运官方网站幻灯切换效果flash版打包下载
2008-01-01
javascript 指定区域内图片等比例缩放实现代码脚本之家整合版
javascript 区域内图片等比例缩放实现代码脚本之家整合版，兼容ie跟firefox。
2009-10-10