脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → PHP编程 → php技巧 → JavaScript实现滚动栏效果

JavaScript实现滚动栏效果的方法

 更新时间：2015年04月27日 09:26:52   作者：亲爱的汉尼拔  
这篇文章主要介绍了JavaScript实现滚动栏效果的方法,涉及javascript操作html元素实现滚动的相关技巧,非常具有实用价值,需要的朋友可以参考下

本文实例讲述了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="image/left.PNG"/></button></div> 
 <div id="div1"> 
  <ul> 
   <li><img src="image/1.JPG"/></li> 
   <li><img src="image/2.JPG"/></li> 
   <li><img src="image/3.JPG"/></li> 
   <li><img src="image/4.JPG"/></li> 
  </ul> 
 </div> 
 <div id="rightDiv"><button><img src="image/right.PNG"/></button></div> 
</div> 
</body> 
</html>

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

您可能感兴趣的文章:

相关文章

  • CentOS系统中PHP安装扩展的方式汇总

    CentOS系统中PHP安装扩展的方式汇总

    本文给大家汇总介绍了CentOS系统中PHP安装拓展的方式，主要有 包管理式 的 yum 安装、pecl 安装，以及 源码编译安装。总结的非常全面，推荐给大家。
    2017-04-04
  • PHP设计模式之简单投诉页面实例

    PHP设计模式之简单投诉页面实例

    这篇文章主要为大家详细介绍了PHP设计模式下简单投诉页面实例，感兴趣的小伙伴们可以参考一下
    2016-02-02
  • php中json_encode UTF-8中文乱码的更好解决方法

    php中json_encode UTF-8中文乱码的更好解决方法

    网上找到说json_encode编码设置为UTF-8中文就不会乱码，在用过一段时间之后就不太管用了，下面与大家分享更好的方法
    2014-09-09
  • php的ddos攻击解决方法

    php的ddos攻击解决方法

    这篇文章主要介绍了php的ddos攻击解决方法,实例分析了ddos攻击程序的原理与针对性的解决方法,是非常实用的技巧,需要的朋友可以参考下
    2015-01-01
  • 非常精妙的PHP递归调用与静态变量使用

    非常精妙的PHP递归调用与静态变量使用

    在PHP编程中，递归调用常常与静态变量使用。静态变量的含义可以参考PHP手册.希望下面的代码，会更有利于对递归以及静态变量的理解
    2012-12-12
  • php使用正则表达式获取图片url的方法

    php使用正则表达式获取图片url的方法

    这篇文章主要介绍了php使用正则表达式获取图片url的方法,涉及正则匹配的相关技巧,需要的朋友可以参考下
    2015-01-01
  • PHP实现负载均衡下的session共用功能

    PHP实现负载均衡下的session共用功能

    这篇文章主要介绍了PHP实现负载均衡下的session共用功能,结合实例形式分析了php基于memcache的session共享相关实现技巧,需要的朋友可以参考下
    2018-04-04
  • PHP邮箱验证示例教程

    PHP邮箱验证示例教程

    这篇文章主要为大家详细介绍了PHP邮箱验证示例，通过实例一步步带领大家认识PHP邮箱验证的过程，感兴趣的小伙伴们可以参考一下
    2016-06-06
  • 通用PHP动态生成静态HTML网页的代码

    通用PHP动态生成静态HTML网页的代码

    最近研究PHP的一些开发技术，发现PHP有很多ASP所没有的优秀功能，可以完成一些以前无法完成的功能，例如动态生成HTML静态页面，以减少服务器CPU的负载，提高用户访问的速度。
    2010-03-03
  • php+curl 发送图片处理代码分享

    php+curl 发送图片处理代码分享

    这篇文章主要介绍了php+curl 发送图片处理代码分享的方法的相关资料,需要的朋友可以参考下
    2015-07-07

最新评论