JavaScript实现滚动栏效果的方法


Posted in PHP onApril 27, 2015

本文实例讲述了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 相关文章推荐
编译问题
Oct 09 PHP
PHP 冒泡排序算法的实现代码
Aug 08 PHP
小文件php+SQLite存储方案
Sep 04 PHP
php实现的Timer页面运行时间监测类
Sep 24 PHP
php禁止直接从浏览器输入地址访问.php文件的方法
Nov 04 PHP
网站防止被刷票的一些思路与方法
Jan 08 PHP
Symfony页面的基本创建实例详解
Jan 26 PHP
CodeIgniter删除和设置Cookie的方法
Apr 07 PHP
jquery不支持toggle()高(新)版本的问题解决
Sep 24 PHP
php求数组全排列,元素所有组合的方法总结
Mar 14 PHP
删除PHP数组中头部、尾部、任意元素的实现代码
Apr 10 PHP
yii2 resetful 授权验证详解
May 18 PHP
php curl 上传文件代码实例
Apr 27 #PHP
php把大写命名转换成下划线分割命名
Apr 27 #PHP
PHP加密解密字符串汇总
Apr 26 #PHP
php开发中的页面跳转方法总结
Apr 26 #PHP
如何使用jQuery+PHP+MySQL来实现一个在线测试项目
Apr 26 #PHP
PHP开启opcache提升代码性能
Apr 26 #PHP
php格式化电话号码的方法
Apr 24 #PHP
You might like
php函数array_merge用法一例(合并同类数组)
2013/02/03 PHP
PHP设计模式之调解者模式的深入解析
2013/06/13 PHP
laravel 如何实现引入自己的函数或类库
2019/10/15 PHP
PHP标准库 (SPL)――Countable用法示例
2020/06/05 PHP
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
2008/11/06 Javascript
js 禁用只读文本框获得焦点时的退格键
2010/04/25 Javascript
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
2013/11/03 Javascript
JQuery插件开发示例代码
2013/11/06 Javascript
js传中文参数controller里获取参数乱码问题解决方法
2014/01/03 Javascript
JavaScript省市联动实现代码
2014/02/15 Javascript
javascript中定义类的方法汇总
2014/12/28 Javascript
用队列模拟jquery的动画算法实例
2015/01/20 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
2015/07/17 Javascript
jquery实现叠层3D文字特效代码分享
2015/08/21 Javascript
快速入门Vue
2016/12/19 Javascript
Bootstrap风格的zTree右键菜单
2017/02/17 Javascript
promise和co搭配生成器函数方式解决js代码异步流程的比较
2018/05/25 Javascript
前端Vue项目详解--初始化及导航栏
2019/06/24 Javascript
vue ssr服务端渲染(小白解惑)
2019/11/10 Javascript
如何解决vue在ios微信&quot;复制链接&quot;功能问题
2020/03/26 Javascript
如何在JavaScript中等分数组的实现
2020/12/13 Javascript
[36:05]完美世界DOTA2联赛循环赛 Forest vs DM 第一场 11.06
2020/11/06 DOTA
Python中的pprint折腾记
2015/01/21 Python
基于python requests库中的代理实例讲解
2018/05/07 Python
Python 实现使用空值进行赋值 None
2020/03/12 Python
python爬虫使用正则爬取网站的实现
2020/08/03 Python
HTML 5 标签、属性、事件及浏览器兼容性速查表 附打包下载
2012/10/20 HTML / CSS
世界上最大的街头服饰网站:Karmaloop
2017/02/04 全球购物
Nike香港官网:Nike HK
2019/03/23 全球购物
个性发展自我评价
2014/02/11 职场文书
出生公证书
2015/01/23 职场文书
材料员岗位职责
2015/02/10 职场文书
2015年建筑工程工作总结
2015/05/13 职场文书
php字符串倒叙
2021/04/01 PHP
Python自动化爬取天眼查数据的实现
2021/06/15 Python
Java基础——Map集合
2022/04/01 Java/Android