不间断循环滚动效果的实例代码(必看篇)

2019-11-20 08:48:18

字体：大中小

来源：转载

供稿：网友

蛮优秀的一段效果代码，可以上下左右滚动，收藏了

<!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>

以上就是小编为大家带来的不间断循环滚动效果的实例代码(必看篇)全部内容了，希望大家多多支持武林网~

上一篇：js html css实现复选框全选与反选

下一篇：关于JavaScript和jQuery的类型判断详解