JavaScript实现滚动栏效果的方法_PHP-php教程-PHP中文网

首页

后端开发

php教程

JavaScript实现滚动栏效果的方法_PHP

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 30, 2016 pm 03:09 PM

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实现滚动栏效果的方法_PHP" ></button></div> 
 <div id="div1"> 
  <ul> 
   <li><img  src="/static/imghwm/default1.png"  data-src="image/1.JPG"  class="lazy"/ alt="JavaScript实现滚动栏效果的方法_PHP" ></li> 
   <li><img  src="/static/imghwm/default1.png"  data-src="image/2.JPG"  class="lazy"/ alt="JavaScript实现滚动栏效果的方法_PHP" ></li> 
   <li><img  src="/static/imghwm/default1.png"  data-src="image/3.JPG"  class="lazy"/ alt="JavaScript实现滚动栏效果的方法_PHP" ></li> 
   <li><img  src="/static/imghwm/default1.png"  data-src="image/4.JPG"  class="lazy"/ alt="JavaScript实现滚动栏效果的方法_PHP" ></li> 
  </ul> 
 </div> 
 <div id="rightDiv"><button><img  src="/static/imghwm/default1.png"  data-src="image/right.PNG"  class="lazy"/ alt="JavaScript实现滚动栏效果的方法_PHP" ></button></div> 
</div> 
</body> 
</html>

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

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

高流量网站的PHP性能调整May 14, 2025 am 12:13 AM

TheSecretTokeEpingAphp-PowerEdwebSiterUnningSmoothlyShyunderHeavyLoadInVolvOLVOLVOLDEVERSALKEYSTRATICES：1）emplactopCodeCachingWithOpcachingWithOpCacheToreCescriptexecution Time，2）使用atabasequercachingCachingCachingWithRedataBasEndataBaseLeSendataBaseLoad，3）

PHP中的依赖注入：初学者的代码示例May 14, 2025 am 12:08 AM

你应该关心DependencyInjection(DI)，因为它能让你的代码更清晰、更易维护。1)DI通过解耦类，使其更模块化，2)提高了测试的便捷性和代码的灵活性，3)使用DI容器可以管理复杂的依赖关系，但要注意性能影响和循环依赖问题，4)最佳实践是依赖于抽象接口，实现松散耦合。

PHP性能：是否可以优化应用程序？May 14, 2025 am 12:04 AM

是的，优化papplicationispossibleandessential.1）empartcachingingcachingusedapcutorediucedsatabaseload.2）优化的atabaseswithexing，高效Quereteries，and ConconnectionPooling.3）EnhanceCodeWithBuilt-unctions，避免使用，避免使用ingglobalalairaiables，并避免使用

PHP性能优化：最终指南May 14, 2025 am 12:02 AM

theKeyStrategiestosiminificallyBoostphpapplicationPermenCeare：1）useOpCodeCachingLikeLikeLikeLikeLikeCacheToreDuceExecutiontime，2）优化AtabaseInteractionswithPreparedStateTemtStatementStatementSandProperIndexing，3）配置

PHP依赖注入容器：快速启动May 13, 2025 am 12:11 AM

aphpdepentioncontiveContainerIsatoolThatManagesClassDeptions，增强codemodocultion，可验证性和Maintainability.itactsasaceCentralHubForeatingingIndections，因此reducingTightCightTightCoupOulplingIndeSingantInting。

PHP中的依赖注入与服务定位器May 13, 2025 am 12:10 AM

选择DependencyInjection(DI)用于大型应用，ServiceLocator适合小型项目或原型。1)DI通过构造函数注入依赖，提高代码的测试性和模块化。2)ServiceLocator通过中心注册获取服务，方便但可能导致代码耦合度增加。

PHP性能优化策略。May 13, 2025 am 12:06 AM

phpapplicationscanbeoptimizedForsPeedAndeffificeby：1）启用cacheInphp.ini，2）使用preparedStatatementSwithPdoforDatabasequesies，3）3）替换loopswitharray_filtaray_filteraray_maparray_mapfordataprocrocessing，4）conformentnginxasaseproxy，5）