资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
一个不错的给图片添加说明文字的动态层的实现代码
<!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> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20language%3D%22javascript%22%20type%3D%22text%2Fjavascript%22%3E%20%0D%0Avar%20slide_content%3Dfunction()%7B%20%0D%0Avar%20id%3D%22slide_content%22%20%2F%2F%E6%BB%91%E5%8A%A8%E5%9B%BE%E7%89%87%E7%88%B6%E5%AE%B9%E5%99%A8%E7%9A%84id%E5%90%8D%20%0D%0Avar%20interval%3D10%3B%20%2F%2F%E6%BB%91%E5%8A%A8%E9%80%9F%E5%BA%A6%20%0D%0Avar%20interval2%3D100%3B%20%2F%2F%E6%96%87%E5%AD%97%E6%BB%91%E5%87%BA%E5%BB%B6%E8%BF%9F%E6%97%B6%E9%97%B4(%E6%AF%AB%E7%A7%92)%20%0D%0Avar%20interval3%3D500%3B%20%2F%2F%E6%96%87%E5%AD%97%E5%86%85%E5%AE%B9%E8%87%AA%E5%8A%A8%E6%B6%88%E5%A4%B1%E7%9A%84%E5%BB%B6%E8%BF%9F%E6%97%B6%E9%97%B4(%E6%AF%AB%E7%A7%92)%20%0D%0Avar%20opacity%3D69%3B%20%2F%2F%E6%96%87%E5%AD%97%E5%86%85%E5%AE%B9%E5%9B%BE%E5%B1%82%E9%80%8F%E6%98%8E%E5%BA%A6%20%0D%0Avar%20timer2%3Dnew%20Array()%3B%20%0D%0Avar%20elem%3Dnew%20Array()%3B%20%0D%0Avar%20status%3Dnew%20Array()%3B%20%0D%0Avar%20div%3Ddocument.getElementById(id).getElementsByTagName(%22div%22)%3B%20%0D%0Avar%20timer3%3D0%3B%20%0D%0A%2F%2Frun_animation%20%0D%0Avar%20d%3Dfunction()%7B%20%0D%0Avar%20timer%2Cobj%2Ctxt%3Bvar%20ypos%3D100%3B%20%0D%0Athis.run%3Dfunction(pra1%2Cpra2%2Cdir)%7Bobj%3Dpra1%3Btxt%3Dpra2%3Bif(dir%3E0)%7BclearTimeout(timer)%3BclearTimeout(timer3)%3Btimer3%3DsetTimeout(obj.up%2Cinterval2)%3B%7Delse%7BclearTimeout(timer)%3Bobj.down()%7D%3Btxt.style.filter%3D%22alpha(opacity%3D%22%2Bopacity%2B%22)%22%3Btxt.style.opacity%3Dopacity%2F100%3B%7D%20%0D%0A%2F%2F%E5%90%91%E4%B8%8A%E6%BB%91%E5%8A%A8%20%0D%0Athis.up%3Dfunction()%7Bif(ypos%3C%3D0)%7Btxt.style.top%3D%220px%22%7Delse%7Bypos-%3D10%3Btxt.style.top%3Dypos%2B%22px%22%3Btimer%3DsetTimeout(obj.up%2Cinterval)%7D%7D%20%0D%0A%2F%2F%E5%90%91%E4%B8%8B%E6%BB%91%E5%8A%A8%20%0D%0Athis.down%3Dfunction()%7Bif(ypos%3E%3D106)%7Btxt.style.top%3D%22106px%22%3B%7Delse%7Bypos%2B%3D15%3Btxt.style.top%3Dypos%2B%22px%22%3Btimer%3DsetTimeout(obj.down%2Cinterval)%7D%7D%20%0D%0A%7D%20%0D%0A%2F%2Finit%20mouse_behavior%20%0D%0Afor(var%20i%3D0%3Bi%3Cdiv.length%3Bi%2B%3D3)%7B%20%0D%0Adiv%5Bi%2B1%5D.index%3Ddiv%5Bi%2B2%5D.index%3Di%2B2%3B%20%0D%0Aelem%5Bi%2B2%5D%3Dnew%20d()%3B%20%0D%0Adiv%5Bi%2B1%5D.onmouseover%3Dfunction()%7Belem%5Bthis.index%5D.run(elem%5Bthis.index%5D%2Cdiv%5Bthis.index%5D%2C1)%7D%3B%20%0D%0Adiv%5Bi%2B1%5D.onmouseout%3Dfunction()%7Bvar%20n%3Dthis.index%3Bif(status%5Bn%5D!%3D1)%7Btimer2%5Bn%5D%3DsetTimeout(imgout%2Cinterval3)%7D%3Bfunction%20imgout()%7Belem%5Bn%5D.run(elem%5Bn%5D%2Cdiv%5Bn%5D%2C-1)%7D%7D%20%0D%0Adiv%5Bi%2B2%5D.onmouseout%3Dfunction()%7Belem%5Bthis.index%5D.run(elem%5Bthis.index%5D%2Cdiv%5Bthis.index%5D%2C-1)%3Bstatus%5Bthis.index%5D%3D0%7D%20%0D%0Adiv%5Bi%2B2%5D.onmouseover%3Dfunction()%7BclearTimeout(timer2%5Bthis.index%5D)%3Bstatus%5Bthis.index%5D%3D1%7D%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%2F%2F%E7%BD%91%E9%A1%B5%E5%8A%A0%E8%BD%BD%E5%AE%8C%E6%AF%95%E6%97%B6%EF%BC%8C%E5%90%AF%E5%8A%A8%E5%87%BD%E6%95%B0%20%0D%0Awindow.onload%3Dslide_content%3B%20%0D%0A%3C%2Fscript%3E"> </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需刷新才能执行
]
教程首页
更多教程