JavaScript实现滚动栏效果的方法，javascript滚动

首頁

後端開發

php教程

JavaScript实现滚动栏效果的方法，javascript滚动_PHP教程

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jul 13, 2016 am 09:56 AM

javascript捲動

JavaScript实现滚动栏效果的方法，javascript滚动

本文实例讲述了JavaScript实现滚动栏效果的方法。分享给大家供大家参考。具体如下：

<!DOCTYPE html> 
<html> 
<head lang="en"> 
 <meta charset="UTF-8"> 
 <title></title> 
 <style> 
  * { 
   margin: 0; 
   padding: 0; 
  } 
  #div1 ul{ 
   position: absolute; 
   left: 0px; 
   top: 0px; 
  } 
  #div1 ul li img { 
   width: 187px; 
   height: 125px; 
  } 
  #div1 ul li{ 
   float: left; 
   width: 187px; 
   height: 125px; 
   list-style: none; 
  } 
  #div1{ 
   width: 748px; 
   height: 125px; 
   position: relative; 
   background-color: chartreuse; 
   overflow: hidden; 
   float: left; 
  } 
  #body{ 
   width: 948px; 
   height: 125px; 
   margin: 100px auto; 
 
  } 
  #body #leftDiv{ 
   float: left; 
   width: 100px; 
   height: 100px; 
  } 
  #body #rightDiv{ 
   float: left; 
   width: 100px; 
   height: 100px; 
  } 
   
  #body #leftDiv button{ 
   background-image: url("image/left.PNG"); 
   width: 100px; 
   height: 100px; 
  } 
  #body #leftDiv button img{ 
   width: 100px; 
   height: 100px; 
  } 
  #body #rightDiv button img{ 
   width: 100px; 
   height: 100px; 
  } 
 </style> 
 <script> 
  window.onload=function(){ 
   var oDiv=document.getElementById('div1'); 
   var oUl=oDiv.getElementsByTagName('ul')[0]; 
   var oLi=oUl.getElementsByTagName('li'); 
   var oLeft=document.getElementById('leftDiv'); 
   var oright=document.getElementById('rightDiv'); 
   oUl.innerHTML+=oUl.innerHTML; 
   oUl.style.width=oLi[0].offsetWidth*oLi.length+'px'; 
   var speed=-2; 
   function move(){ 
    if (oUl.offsetLeft<-oUl.offsetWidth/2){ 
     oUl.style.left='0'; 
    }else if(oUl.offsetLeft>0){ 
     oUl.style.left=-oUl.offsetWidth/2+'px'; 
    } 
    oUl.style.left=oUl.offsetLeft+speed+'px'; 
   }; 
   var timer=setInterval(move,30); 
   oLeft.onclick=function(){ 
    speed=-2; 
   }; 
   oright.onclick= function () { 
    speed=2; 
   }; 
   oUl.onmouseover=function(){ 
    clearInterval(timer); 
   }; 
   oUl.onmouseout=function(){ 
    timer=setInterval(move,30); 
   }; 
  } 
 </script> 
</head> 
<body> 
<div id="body"> 
 <div id="leftDiv"><button><img  src="/static/imghwm/default1.png"  data-src="image/left.PNG"  class="lazy"/ alt="JavaScript实现滚动栏效果的方法，javascript滚动_PHP教程" ></button></div> 
 <div id="div1"> 
  <ul> 
   <li><img  src="/static/imghwm/default1.png"  data-src="image/1.JPG"  class="lazy"/ alt="JavaScript实现滚动栏效果的方法，javascript滚动_PHP教程" ></li> 
   <li><img  src="/static/imghwm/default1.png"  data-src="image/2.JPG"  class="lazy"/ alt="JavaScript实现滚动栏效果的方法，javascript滚动_PHP教程" ></li> 
   <li><img  src="/static/imghwm/default1.png"  data-src="image/3.JPG"  class="lazy"/ alt="JavaScript实现滚动栏效果的方法，javascript滚动_PHP教程" ></li> 
   <li><img  src="/static/imghwm/default1.png"  data-src="image/4.JPG"  class="lazy"/ alt="JavaScript实现滚动栏效果的方法，javascript滚动_PHP教程" ></li> 
  </ul> 
 </div> 
 <div id="rightDiv"><button><img  src="/static/imghwm/default1.png"  data-src="image/right.PNG"  class="lazy"/ alt="JavaScript实现滚动栏效果的方法，javascript滚动_PHP教程" ></button></div> 
</div> 
</body> 
</html>

希望本文所述对大家的javascript程序设计有所帮助。

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

您如何修改PHP會話中存儲的數據？Apr 27, 2025 am 12:23 AM

tomodifyDataNaphPsession，startTheSessionWithSession_start（），然後使用$ _sessionToset，修改，orremovevariables.1）startThesession.2）setthesession.2）使用$ _session.3）setormodifysessessvariables.3）emovervariableswithunset（）

舉一個在PHP會話中存儲數組的示例。Apr 27, 2025 am 12:20 AM

在PHP會話中可以存儲數組。 1.啟動會話，使用session_start()。 2.創建數組並存儲在$_SESSION中。 3.通過$_SESSION檢索數組。 4.優化會話數據以提升性能。

垃圾收集如何用於PHP會議？Apr 27, 2025 am 12:19 AM

PHP會話垃圾回收通過概率機制觸發，清理過期會話數據。 1）配置文件中設置觸發概率和會話生命週期；2）可使用cron任務優化高負載應用；3）需平衡垃圾回收頻率與性能，避免數據丟失。

如何在PHP中跟踪會話活動？Apr 27, 2025 am 12:10 AM

PHP中追踪用戶會話活動通過會話管理實現。 1)使用session_start()啟動會話。 2)通過$_SESSION數組存儲和訪問數據。 3)調用session_destroy()結束會話。會話追踪用於用戶行為分析、安全監控和性能優化。

如何使用數據庫存儲PHP會話數據？Apr 27, 2025 am 12:02 AM

利用數據庫存儲PHP會話數據可以提高性能和可擴展性。 1）配置MySQL存儲會話數據：在php.ini或PHP代碼中設置會話處理器。 2）實現自定義會話處理器：定義open、close、read、write等函數與數據庫交互。 3）優化和最佳實踐：使用索引、緩存、數據壓縮和分佈式存儲來提升性能。

簡單地說明PHP會話的概念。Apr 26, 2025 am 12:09 AM

phpsessionstrackuserdataacrossmultiplepagerequestsusingauniqueIdStoredInAcookie.here'showtomanageThemeffectionaly：1）startAsessionWithSessionWwithSession_start（）和stordoredAtain $ _session.2）

您如何循環中存儲在PHP會話中的所有值？Apr 26, 2025 am 12:06 AM

在PHP中，遍歷會話數據可以通過以下步驟實現：1.使用session_start()啟動會話。 2.通過foreach循環遍歷$_SESSION數組中的所有鍵值對。 3.處理複雜數據結構時，使用is_array()或is_object()函數，並用print_r()輸出詳細信息。 4.優化遍歷時，可採用分頁處理，避免一次性處理大量數據。這將幫助你在實際項目中更有效地管理和使用PHP會話數據。