物体运动基础
让Div移动起来
offsetLeft的作用
用定时器让物体连续移动
效果原理
让ul一直向左移动
复制li
innerHTML和+=
修改ul的width
滚动过界后，重设位置
判断过界
改变滚动方向
修改speed
修改判断条件
鼠标移入暂停
移入关闭定时器
移出重新开启定时器
  1.  <style>
  2.  *{ margin:0px; padding:0px;}
  3.  #div1{ width:712px; height:108px; margin:100px auto; position:relative; background:#F00; overflow:hidden;}
  4.  #div1 ul{ position:absolute; left:0px; top:0px; }
  5.  #div1 ul li{ float:left; list-style:none; width:178px; height:108px;}
  6.  </style>
  7.  <script>
  8.  
  9.  window.onload=function ()
  10.  {
  11.      var oDiv=document.getElementById('div1');
  12.      var oUl=oDiv.getElementsByTagName('ul')[0];
  13.      var oLi=oDiv.getElementsByTagName('li');
  14.  
  15.      oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
  16.      oUl.style.width=oLi[0].offsetWidth*oLi.length+'px';
  17.      var num=-2;
  18.  
  19.      function move()
  20.      {
  21.          if(oUl.offsetLeft<-oUl.offsetWidth/2)
  22.          {
  23.              oUl.style.left='0';
  24.              }
  25.              if(oUl.offsetLeft>0)
  26.              {
  27.                  oUl.style.left=-oUl.offsetWidth/2+'px'; //当oUl.style.left>0 也就是left 到达右边，后面跟着出现红色，此时只需把它的宽度拉到offsetWidth的中段(oUl的宽度)即可
  28.                  }
  29.          oUl.style.left=oUl.offsetLeft+num+'px';
  30.          }
  31.  
  32.      timer=setInterval( move
  33.      ,30)
  34.      oDiv.onmouseover=function ()
  35.      {
  36.          clearInterval(timer);
  37.      };
  38.  
  39.      oDiv.onmouseout=function ()
  40.      {
  41.          timer=setInterval(move, 30);
  42.      };
  43.  
  44.      document.getElementsByTagName('a')[0].onclick=function ()
  45.      {
  46.          num=-2;
  47.          }
  48.          document.getElementsByTagName('a')[1].onclick=function (){ num=2;}
  49.  
  50.      };
  51.  
  52.  </script>
  53.  </head>
  54.  
  55.  <body>
  56.  <a href="#">向左走</a>
  57.  <a href="#">向右走</a>
  58.  <div id="div1">
  59.    <ul>
  60.  
  61.    <li> <img src="data:images/1.jpg"/></li>
  62.     <li> <img src="data:images/2.jpg"/></li>
  63.      <li> <img src="data:images/3.jpg"/></li>
  64.        <li> <img src="data:images/4.jpg"/></li>
  65.  
  66.    </ul>
  67.  </div>
  68.  </body>

闲扯 Javascript 04 滚动条的更多相关文章

  1. javascript自定义滚动条插件，几行代码的事儿

    在实际项目中,经常由于浏览器自带的滚动条样式太戳,而且在各个浏览器中显示不一样,所以我们不得不去实现自定义的滚动条,今天我就用最少的代码实现了一个自定义滚动条,代码量区区只有几十行,使用起来也非常方便 ...

  2. 原声JavaScript实现滚动条·改1

    修正了获取元素相对视口左距离的逻辑问题(之前的函数实际获取的是相对于页面左距离).去除了调试时忘记删除的mouseleave事件.将创建滚动条的功能单独列为一个函数. 添加了鼠标点在滚动条什么位置,就 ...

  3. javascript实现 滚动条滚动 加载内容

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 【转】Selenium 利用javascript 控制滚动条

    http://luyongxin88.blog.163.com/blog/static/92558072011101913013149/ < xmlnamespace prefix =" ...

  5. javascript 获取滚动条高度+常用js页面宽度与高度

    /******************** * 取窗口滚动条高度  ******************/function getScrollTop(){    var scrollTop=0;    ...

  6. 原生JavaScript实现滚动条

    没事找事,明明overflow:scroll|auto就可以,只是难看点(实际上css也能设置).只当练习写拖拽.监听事件.位置检测了. 原理是对滑动条块进行监听,按下鼠标按键后,监听鼠标移动,然后根 ...

  7. javascript 获取滚动条高度+常用js页面宽度与高度（转）

    /******************** *获取窗口滚动条高度 ******************/ function getScrollTop() { var scrollTop=0; if(d ...

  8. 闲扯 Javascript 01 实现选项卡

    javascript 实现选项卡 今天下午的两节课,在机房闲来没事 ,就学习了javascript 怎么获取HTML的标签,改变CSS样式,资料来源 智能社! <script> windo ...

  9. 闲扯 Javascript 00

    引言 Javascript  的作用在此就不阐述了,相信你已经知道它的用途!那我说点什么呢? 不如就和大家先扯一把,后面的工作 随后后展开吧! 首先声明:我个人对Javascript 认识,我只知道它 ...

随机推荐

  1. vi 替换命令“找不到模式”解决

    在linux vi编辑工具中使用替换命令操作时,会出现明明有匹配查找模式的数据.却报"找不到模式"问题. 原因是vi s///替换操作缺省针对行,若要生效,则须要将光标移动到指定行 ...

  2. C#--遍历目录实例

    鉴于前面几篇博客都说了,这边就啥都不说了.直接就開始贴代码了. 1.控件解释: FolderBrowserDialog控件一个----用来显示"浏览目录"对话框 TextBox控件 ...

  3. Python经常使用第三方工具、库、骨架

    Python ImagingLibrary(PIL):它提供强大的图形处理的能力,并提供广泛的图形文件格式支持.该库能进行图形格式的转换.打印和显示.还能进行一些图形效果的处理,如图形的放大.缩小和旋 ...

  4. char*与char[]

    char *s1="hello";   // 指向常量区 char s2[]="hello";   // 指向数组的内存空间 char *s1 的s1是指针,指 ...

  5. 五毛的cocos2d-x学习笔记01-创建项目

    终于准备开始学习cocos2d-x了.因为想和同学一起做游戏参加比赛,所以打算学习很热的Cocos2d-x.因为已经学习了C++,所以我想入门应该不是很困难.再加上官网有中文教程以及多不胜数的游戏开发 ...

  6. JAVA语言的素数判断，随机数，函数调用

    近来刚学JAVA,就从JAVA写起吧,JAVA判别素数,其实方法和C/C++没什么区别,主要就是想谈一下,其中包括的3个点. (1)JAVA语言产生随机数,random函数,定义参数max的作用是给出 ...

  7. 深夜，用canvas画一个时钟

    深夜,用canvas画一个时钟 查看demo 这几天准备阿里巴巴的笔试,可以说已经是心力交瘁,自从阿里和蘑菇街的内推被刷掉之后,开始越来越怀疑起自己的能力来,虽然这点打击应该是微不足道的.毕竟校招在刚 ...

  8. 转:.Net程序员学习Linux最简单的方法

    有很多关于Linux的书籍,博客.大多数都会比较“粗暴“的将一大堆的命令塞给读者,从而使很多.NET程序员望而却步.未入其门就路过了. 所以我设想用一种更为平滑的学习方式, 就是在学习命令时,先用纯语 ...

  9. Uva 167 The Sultan's Successors(dfs)

    题目链接:Uva 167 思路分析:八皇后问题,采用回溯法解决问题. 代码如下: #include <iostream> #include <string.h> using n ...

  10. 搜狐畅游：每月给员工直系长辈2000元爱孝薪_企业新闻_265G产业频道

    搜狐畅游:每月给员工直系长辈2000元爱孝薪_企业新闻_265G产业频道 搜狐畅游:每月给员工直系长辈2000元爱孝薪