Javascript实现图片不间断滚动的代码
程序员文章站
2023-11-13 00:01:10
蛮优秀的一段效果代码,可以上下左右滚动,收藏了!!
蛮优秀的一段效果代码,可以上下左右滚动,收藏了!!
<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=gb2312"/> <title>滚动测试</title> <script type="text/javascript"> /** * @para obj 目标对象 如:demo,deml1,demo2 中的"demo" 可任意,只要不重复 * * @para speed 滚动速度 越大越慢 * * @para direction 滚动方向 包括:left,right,down,up * * @para objwidth 总可见区域宽度 * * @para objheight 总可见区域高度 * * @para filepath 存放滚动图片的路径 (如果是自动获取文件夹里的图片滚动) * * @para contentbyid 对某id为contentbyid下的内容进行滚动 此滚动与filepath不能共存请注意 * * @para 用法实例 scrollobject("res",50,"up",470,200,"","resource") 对contentbyid(resource)下内容进行滚动 * * @para 用法实例 scrollobject("res",50,"up",470,200,"d:\\images\\","") 对filepath(images)下内容自动获取并进行滚动,目前只支持ie */ var $ =function(id){return document.getelementbyid(id)} // 滚动 function scrollobject(obj,speed,direction,objwidth,objheight,filepath,contentbyid) { // 执行初始化 if(direction=="up"||direction=="down") document.write(udstructure()); else document.write(lrstructure()); var demo = $(obj); var demo1 = $(obj+"1"); var demo2 = $(obj+"2"); var speed=speed; $(contentbyid).style.display="none" demo.style.overflow="hidden"; demo.style.width = objwidth+"px"; demo.style.height = objheight+"px"; demo.style.margin ="0 auto"; if(filepath!="") demo1.innerhtml=file(); if(contentbyid!="") demo1.innerhtml=$(contentbyid).innerhtml; demo2.innerhtml=demo1.innerhtml; // 左右滚动 function lrstructure() { var _html =""; _html+="<div id='"+obj+"' >"; _html+="<table border='0' align='left' cellpadding='0' cellspacing='0' cellspace='0'>"; _html+="<tr>"; _html+="<td nowrap='nowrap' id='"+obj+"1' >"; // 此处是放要滚动的内容 _html+="</td>"; _html+="<td nowrap='nowrap' id='"+obj+"2' ></td>"; _html+="</tr>"; _html+="</table>"; _html+="</div>"; return _html; } // 上下滚动的结构 function udstructure() { var _html =""; _html+="<div id="+obj+" >"; _html+="<table border='0' align='left' cellpadding='0' cellspacing='0' cellspace='0'>"; _html+="<tr>"; _html+="<td id='"+obj+"1' >"; // 此处是放要滚动的内容 _html+="</td>"; _html+="</tr>"; _html+="<tr>"; _html+="<td id='"+obj+"2' ></td>"; _html+="</tr>"; _html+="</table>"; _html+="</div>"; return _html; } // 取得文件夹下的图片 function file() { var tbsource = filepath;//本地文件夹路径 filepath = filepath.tostring(); if (filepath=="") return""; var imglist =""; var objfso =new activexobject('scripting.filesystemobject'); // 文件夹是否存在 if(!objfso.folderexists(tbsource)) { alert("<"+tbsource+">该文件夹路径不存在,或者路径不能含文件名!"); objfso =null; return; } var objfolder = objfso.getfolder(tbsource); var colfiles =new enumerator(objfolder.files); var re_inf1 =/\.jpg$/; //验证文件夹文件是否jpg文件 for (;!colfiles.atend();colfiles.movenext()) //读取文件夹下文件 { var objfile = colfiles.item(); if(re_inf1.test(objfile.name.tolowercase())) { imglist +="<img src="+filepath+"/"+objfile.name+">"; } } return imglist; } // 向左滚 function left() { if(demo2.offsetwidth-demo.scrollleft<=0) { demo.scrollleft-=demo1.offsetwidth; } else { demo.scrollleft++; } } // 向右滚 function right() { if(demo.scrollleft<=0) { demo.scrollleft+=demo2.offsetwidth; } else { demo.scrollleft-- } } // 向下滚 function down() { if(demo1.offsettop-demo.scrolltop>=0) { demo.scrolltop+=demo2.offsetheight; } else { demo.scrolltop-- } } // 向上滚 function up() { if(demo2.offsettop-demo.scrolltop<=0) { demo.scrolltop-=demo1.offsetheight; } else { demo.scrolltop++ } } // 切换方向 function swichdirection() { switch(direction) { case"left": return left(); break; case"right": return right(); break; case"up": return up(); break; default: return down(); } } // 重复执行 var mymarquee=setinterval(swichdirection,speed); // 鼠标悬停 demo.onmouseover=function() {clearinterval(mymarquee);} // 重新开始滚动 demo.onmouseout=function() { mymarquee=setinterval(swichdirection,speed);} } </script> </head> <body> <div id="img"> <table width="1000" border="0" align="center" cellpadding="5" cellspacing="0"> <tr> <td width="200"><img src="http://attach.e.iciba.com/attachment/200910/22/4188617_12561994098532.jpg" alt="" width="200" height="150"/></td> <td width="200"><img src="http://pica.nipic.com/2008-05-27/2008527145211519_2.jpg" alt="" width="200" height="150"/></td> <td width="200"><img src="http://pic4.nipic.com/20090823/383152_215728074589_2.jpg" alt="" width="200" height="150"/></td> <td width="200"><img src="http://pic8.nipic.com/20100628/4643449_170245009531_2.jpg" alt="" width="200" height="150"/></td> <td width="200"><img src="http://pica.nipic.com/2008-05-30/20085309524648_2.jpg" alt="" width="200" height="150"/></td> </tr> </table> </div> <script type="text/javascript"> scrollobject("sr",50,"right",800,160,"","img") </script> </body> </html>
以上就是本文的全部内容,了解更多javascript的语法,大家可以查看:《javascript 参考教程》、《javascript代码风格指南》,也希望大家多多支持。
上一篇: jQuery中使用validate插件校验表单功能
下一篇: C#泛型用法实例分析