javascript实现的上下无缝滚动效果


Posted in Javascript onSeptember 19, 2016

本文实例讲述了javascript实现的上下无缝滚动效果。分享给大家供大家参考,具体如下:

前面介绍了JS左右无缝滚动效果,现在做下无缝滚动——上下的效果。其他代码和左右的差不多,只是改变的是 offsetTop 的值,并且不需要计算 ul 整体的宽度了。

<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>无缝滚动——上下</title>
  <style type="text/css">
  *{margin:0;padding:0;}
  li{list-style:none;}
  img{border:0;}
  #scroll{width:178px;margin:50px auto;position:relative;}
  .btn{display:block;width:27px;height:27px;margin-left:auto;margin-right:auto;cursor:pointer;}
  .up{background:url(images/up.gif);}
  .down{background:url(images/down.gif);}
  .content{margin:10px 0;height:440px;overflow:hidden;position:relative;}
  .content ul{position:absolute;top:0;left:0;}
  .content li{height:110px;}
  </style>
</head>
<body>
  <div id="scroll">
    <a href="javascript:;" id="up" class="btn up"></a>
    <div class="content">
      <ul>
        <li><a href="#" title="111"><img src="images/1.jpg" alt="111" width="178" height="108"/></a></li>
        <li><a href="#" title="222"><img src="images/2.jpg" alt="222" width="178" height="108"/></a></li>
        <li><a href="#" title="333"><img src="images/3.jpg" alt="333" width="178" height="108"/></a></li>
        <li><a href="#" title="444"><img src="images/4.jpg" alt="444" width="178" height="108"/></a></li>
      </ul>
    </div>
    <a class="btn down" href="javascript:;" id="down"></a>
  </div>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
  var oDiv = document.getElementById('scroll');
  var btnUp = document.getElementById('up');
  var btnDown = document.getElementById('down');
  var oUl = oDiv.getElementsByTagName('ul')[0];
  var timer = null;
  var speed = -1;
  oUl.innerHTML += oUl.innerHTML;
  setTimeout(move,1500);
  btnUp.onclick = function(){
    clearInterval(timer);
    speed = -1;
    move();
  };
  btnDown.onclick = function(){
    clearInterval(timer);
    speed = 1;
    move();
  };
  oUl.onmouseover = function(){
    clearInterval(timer);
  };
  oUl.onmouseout = function(){
    move();
  };
  function move(){
    timer = setInterval(function(){
      oUl.style.top = oUl.offsetTop + speed + 'px';
      if(oUl.offsetTop <= - oUl.offsetHeight / 2){
        oUl.style.top = '0';
      }else if(oUl.offsetTop >= 0){
        oUl.style.top = - oUl.offsetHeight / 2 + 'px';
      };
    },30);
  };
};
</script>

如果要改变移动速度,修改 speed 的值即可,初始默认为向上移动,即速度为负数。

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

Javascript 相关文章推荐
Jquery cookie操作代码
Mar 14 Javascript
妙用Jquery的val()方法
Jun 27 Javascript
XMLHttpRequest处理xml格式的返回数据(示例代码)
Nov 21 Javascript
javascript中定义类的方法详解
Feb 10 Javascript
一个简单不报错的summernote 图片上传案例
Jul 11 Javascript
JavaScript比较当前时间是否在指定时间段内的方法
Aug 02 Javascript
vue-cli2打包前和打包后的css前缀不一致的问题解决
Aug 24 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
Fetch超时设置与终止请求详解
May 18 Javascript
Vue2.x通用编辑组件的封装及应用详解
May 28 Javascript
ElementUI之Message功能拓展详解
Oct 18 Javascript
一文搞懂redux在react中的初步用法
Jun 09 Javascript
Angular ng-class详解及实例代码
Sep 19 #Javascript
javascript实现的左右无缝滚动效果
Sep 19 #Javascript
javascript实现图片左右滚动效果【可自动滚动,有左右按钮】
Sep 19 #Javascript
BootStrap入门教程(三)之响应式原理
Sep 19 #Javascript
HTML5 实现的一个俄罗斯方块实例代码
Sep 19 #Javascript
javascript this详细介绍
Sep 19 #Javascript
JS遍历ul下的li点击弹出li的索引的实现方法
Sep 19 #Javascript
You might like
用mysql触发器自动更新memcache的实现代码
2009/10/11 PHP
php绘制一条直线的方法
2015/01/24 PHP
深入讲解PHP的Yii框架中的属性(Property)
2016/03/18 PHP
FireFox中textNode分片的问题
2007/04/10 Javascript
Mootools 1.2教程 滚动条(Slider)
2009/09/15 Javascript
javascript 导出数据到Excel(处理table中的元素)
2009/12/18 Javascript
jQuery中each()方法用法实例
2014/12/27 Javascript
JavaScript实现带播放列表的音乐播放器实例分享
2016/03/07 Javascript
jQuery中JSONP的两种实现方式详解
2016/09/26 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
2016/10/28 Javascript
微信小程序 radio单选框组件详解及实例代码
2017/01/10 Javascript
JavaScript实现简单的树形菜单效果
2017/06/23 Javascript
微信小程序实现保存图片到相册功能
2018/11/30 Javascript
关于node-bindings无法在Electron中使用的解决办法
2018/12/18 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
2019/04/17 Javascript
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
2019/06/10 Javascript
JavaScript WeakMap使用详解
2021/02/05 Javascript
python检测远程服务器tcp端口的方法
2015/03/14 Python
深入理解Python中字典的键的使用
2015/08/19 Python
利用 Monkey 命令操作屏幕快速滑动
2016/12/07 Python
计算机二级python学习教程(3) python语言基本数据类型
2019/05/16 Python
pytorch torchvision.ImageFolder的用法介绍
2020/02/20 Python
简单了解django处理跨域请求最佳解决方案
2020/03/25 Python
详解tf.device()指定tensorflow运行的GPU或CPU设备实现
2021/02/20 Python
HTML5 Canvas 破碎重组的视频特效的示例代码
2019/09/24 HTML / CSS
凯特王妃父母建立的派对用品网站:Party Pieces
2017/05/28 全球购物
美国汽车性能部件和赛车零件网站:Vivid Racing
2018/03/27 全球购物
Nike荷兰官方网站:Nike.com (NL)
2018/04/19 全球购物
复古服装:RetroStage
2019/05/10 全球购物
linux面试题参考答案(10)
2013/11/04 面试题
应届大专毕业生个人自荐信
2013/09/22 职场文书
廉政教育的心得体会
2014/09/01 职场文书
就业协议书范本
2014/10/08 职场文书
个人事迹材料怎么写
2014/12/30 职场文书
工作表扬信
2015/01/17 职场文书
语文教师个人工作总结
2015/02/06 职场文书