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 相关文章推荐
如何用javascript判断录入的日期是否合法
Jan 08 Javascript
JavaScript中this关键字使用方法详解
Mar 08 Javascript
Javascript 网页黑白效果实现代码(兼容IE/FF等)
Apr 23 Javascript
面向对象的Javascript之二(接口实现介绍)
Jan 27 Javascript
基于jQuery实现下拉收缩(展开与折叠)特效
Dec 25 Javascript
Js判断CSS文件加载完毕的具体实现
Jan 17 Javascript
使用jQuery实现星级评分代码分享
Dec 09 Javascript
推荐4个原生javascript常用的函数
Jan 12 Javascript
vue.js指令和组件详细介绍及实例
Apr 06 Javascript
关于javascript获取内联样式与嵌入式样式的实例
Jun 01 Javascript
对Vue table 动态表格td可编辑的方法详解
Aug 28 Javascript
no-vnc和node.js实现web远程桌面的完整步骤
Aug 11 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抓取https的内容的代码
2010/04/06 PHP
PHP中计算字符串相似度的函数代码
2012/12/29 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
jquery事件重复绑定的快速解决方法
2014/01/03 Javascript
instanceof和typeof运算符的区别详解
2014/01/06 Javascript
js原型继承的两种方法对比介绍
2014/03/30 Javascript
jQuery+css实现百度百科的页面导航效果
2014/12/16 Javascript
jQuery中:reset选择器用法实例
2015/01/04 Javascript
JavaScript中操作字符串小结
2015/05/04 Javascript
JavaScript实现添加、查找、删除元素
2015/07/02 Javascript
angularjs点击图片放大实现上传图片预览
2017/02/24 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
2017/04/21 Javascript
jQuery实现jQuery-form.js实现异步上传文件
2017/04/28 jQuery
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
2017/10/24 Javascript
利用js-cookie实现前端设置缓存数据定时失效
2019/06/18 Javascript
在Chrome DevTools中调试JavaScript的实现
2020/04/07 Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
2020/07/29 Javascript
JavaScript事件委托实现原理及优点进行
2020/08/29 Javascript
基于原生JS封装的Modal对话框插件的示例代码
2020/09/09 Javascript
详解python之配置日志的几种方式
2017/05/22 Python
使用python画社交网络图实例代码
2019/07/10 Python
Python Lambda函数使用总结详解
2019/12/11 Python
python如何安装下载后的模块
2020/07/03 Python
css3 线性渐变和径向渐变示例附图
2014/04/08 HTML / CSS
Skyscanner阿联酋:全球领先的旅游搜索平台
2017/11/25 全球购物
德国黑胶唱片、街头服装及运动鞋网上商店:HHV
2018/08/24 全球购物
意大利宠物用品购物网站:Bauzaar
2018/09/15 全球购物
Sisley法国希思黎中国官网:享誉全球的奢华植物美容品牌
2019/06/30 全球购物
解释下列WebService名词:WSDL、SOAP、UDDI
2012/06/22 面试题
领导党性分析材料
2014/02/15 职场文书
学生安全责任书
2014/04/15 职场文书
师范生自荐信模板
2014/05/28 职场文书
奖学金申请个人主要事迹材料
2015/11/04 职场文书
python实现web邮箱扫描的示例(附源码)
2021/03/30 Python
SpringRetry重试框架的具体使用
2021/07/25 Java/Android
TV动画《神废柴☆偶像》公布先导PV
2022/03/20 日漫