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 相关文章推荐
js cookies实现简单统计访问次数
Nov 24 Javascript
解决iframe的frameborder在chrome/ff/ie下的差异
Aug 12 Javascript
Javascript 面向对象(二)封装代码
May 23 Javascript
jQuery JSON实现无刷新三级联动实例探讨
May 28 Javascript
按Enter键触发事件的jquery方法实现代码
Feb 17 Javascript
浅谈JavaScript Array对象
Dec 29 Javascript
jQuery表单美化插件jqTransform使用详解
Apr 12 Javascript
jQuery实现的超简单点赞效果实例分析
Dec 31 Javascript
mpvue 如何使用腾讯视频插件的方法
Jul 16 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
Jul 04 Javascript
ES6基础之 Promise 对象用法实例详解
Aug 22 Javascript
node脚手架搭建服务器实现token验证的方法
Jan 20 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
让PHP支持页面回退的两种方法
2008/01/10 PHP
利用Ffmpeg获得flv视频缩略图和视频时间的代码
2011/09/15 PHP
关于访问控制的一首PHP面试题(对属性或方法的访问控制)
2012/09/13 PHP
PHP递归算法的详细示例分析
2013/02/19 PHP
php7 list()、session及其他模块的修改实例分析
2020/05/25 PHP
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
2013/06/04 Javascript
使用jquery hover事件实现表格的隔行换色功能示例
2013/09/03 Javascript
深入浅析JavaScript中prototype和proto的关系
2015/11/15 Javascript
Javascript动画效果(1)
2016/10/11 Javascript
vue.js利用Object.defineProperty实现双向绑定
2017/03/09 Javascript
Node.js使用Express.Router的方法
2017/11/14 Javascript
vue项目国际化vue-i18n的安装使用教程
2018/03/14 Javascript
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
2018/07/27 Javascript
vue-cli项目代理proxyTable配置exclude的方法
2018/09/20 Javascript
js实现简易点击切换显示或隐藏
2020/11/29 Javascript
[01:52]2014DOTA2西雅图邀请赛 V社开大会你不知道的小秘密
2014/07/08 DOTA
[50:28]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs KG
2018/04/01 DOTA
[49:28]VP vs Optic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Django添加sitemap的方法示例
2018/08/06 Python
python 画出使用分类器得到的决策边界
2019/08/21 Python
Python3操作MongoDB增册改查等方法详解
2020/02/10 Python
python numpy库linspace相同间隔采样的实现
2020/02/25 Python
python——全排列数的生成方式
2020/02/26 Python
详解用Python进行时间序列预测的7种方法
2020/03/13 Python
Python视频编辑库MoviePy的使用
2020/04/01 Python
ITK 实现多张图像转成单个nii.gz或mha文件案例
2020/07/01 Python
python多线程semaphore实现线程数控制的示例
2020/08/10 Python
python高级特性简介
2020/08/13 Python
Python根据字典的值查询出对应的键的方法
2020/09/30 Python
使用纯 CSS 创作一个脉动 loader效果的源码
2018/09/28 HTML / CSS
得到Class的三个过程是什么
2012/08/10 面试题
Android面试题附答案
2014/12/08 面试题
暑期社会实践先进个人主要事迹
2014/05/22 职场文书
暖通工程师岗位职责
2014/06/12 职场文书
青春雷锋观后感
2015/06/10 职场文书
基于Python实现的购物商城管理系统
2021/04/27 Python