DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 不間斷循環滾動效果的實例代碼(必看篇)
不間斷循環滾動效果的實例代碼(必看篇)
編輯:關於JavaScript     

蠻優秀的一段效果代碼,可以上下左右滾動,收藏了

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

以上就是小編為大家帶來的不間斷循環滾動效果的實例代碼(必看篇)全部內容了,希望大家多多支持~

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved