脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • PHP使用curl模拟post上传及接收文件的方法

    PHP使用curl模拟post上传及接收文件的方法

    这篇文章主要介绍了PHP使用curl模拟post上传及接收文件的方法,涉及PHP使用curl实现post文件传输的相关技巧,需要的朋友可以参考下
    2016-03-03
  • 使用VisualStudio开发php的图文设置方法

    使用VisualStudio开发php的图文设置方法

    早先在asp横行的年代，php和asp一样，大都都是html中夹杂代码，说实话，这时候IDE的确用处不是很大，倒是类似于dw之类的设计器甚为上手。
    2010-08-08
  • PHP获取域名的方法和技巧

    PHP获取域名的方法和技巧

    在Web开发中,获取域名相关信息,是一项必备的能力,而PHP天生地具有解析URI的能力,所以PHP获取域名也变得非常简单,在这里整理了一些,PHP获取域名的方法和技巧,需要的朋友可以参考下
    2023-08-08
  • Ajax+Jpgraph实现的动态折线图功能示例

    Ajax+Jpgraph实现的动态折线图功能示例

    这篇文章主要介绍了Ajax+Jpgraph实现的动态折线图功能,结合实例形式分析了ajax结合jpgraph.php类库绘制动态折线图的相关操作技巧,需要的朋友可以参考下
    2019-02-02
  • thinkphp5使用bootstrapvalidator进行异步验证邮箱的示例

    thinkphp5使用bootstrapvalidator进行异步验证邮箱的示例

    这篇文章主要介绍了thinkphp5使用bootstrapvalidator进行异步验证邮箱的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • PHP获取栏目的所有子级和孙级栏目的ID号示例

    PHP获取栏目的所有子级和孙级栏目的ID号示例

    这篇文章主要介绍了PHP获取栏目的所有子级和孙级栏目的ID号的具体实现,需要的朋友可以参考下
    2014-04-04
  • Yii2设置默认控制器的两种方法

    Yii2设置默认控制器的两种方法

    安装好Yii2后,Yii2的默认的控制器是SiteController,新建Modules的时候默认的控制器是DefaultController.如果开发和路由需要修改成其他控制器为默认的控制器的话。下面这篇文章主要给大家介绍了关于Yii2设置默认控制器的两种方法，需要的朋友可以参考下。
    2017-05-05
  • php中静态类与静态变量用法的区别分析

    php中静态类与静态变量用法的区别分析

    这篇文章主要介绍了php中静态类与静态变量用法的区别,以实例形式较为详细的分析了php中静态类与静态变量的定义、功能及使用技巧,需要的朋友可以参考下
    2015-01-01
  • async和DOM Script文件加载比较

    async和DOM Script文件加载比较

    async与script动态加载都能使文件异步加载，本文叙述它们对页面渲染和load加载的影响方面。
    2014-07-07
  • PHP curl 并发最佳实践代码分享

    PHP curl 并发最佳实践代码分享

    在实际项目或者自己编写小工具(比如新闻聚合,商品价格监控,比价)的过程中, 通常需要从第3方网站或者API接口获取数据, 在需要处理1个URL队列时, 为了提高性能, 可以采用cURL提供的curl_multi_*族函数实现简单的并发
    2012-09-09

最新评论