简单实现js间歇或无缝滚动效果


Posted in Javascript onJune 29, 2016

间歇、无缝滚动效果(用gif录制的效果不是很好,有兴趣的可以down代码),具体内容如下

简单实现js间歇或无缝滚动效果

代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>无缝滚动</title>
 <style>
  *{margin:0;padding:0;}
  .box{width: 500px;height: 400px;margin:40px auto;background: #ccc;overflow: hidden;}
  .block{position: relative;width: 500px;height: 400px;overflow: hidden;}
  .item{height: 40px;background: red;color: #fff;line-height: 40px;text-align: center;}
  .item:nth-child(2n){background: #000}
 </style>
 <script>
  var scrollUp=(function(){
   return function(json){
    var objScroll = document.getElementById(json.id);
    objScroll.scrollTop = 0;
    objScroll.innerHTML += objScroll.innerHTML;
    if(json.on){
     function scrollIng(){
      if(objScroll.scrollTop >= objScroll.scrollHeight) {
       objScroll.scrollTop = 0;
      }else{
       objScroll.scrollTop ++; 
      } 
     }
     var myScroll = setInterval(function(){scrollIng()},30);
     objScroll.onmouseover = function(){
      clearInterval(myScroll);
     }
     objScroll.onmouseout = function(){
      myScroll = setInterval(function(){scrollIng()},30);
     }
    }else{
     var timer;
     function startScroll(){
      timer=setInterval(function(){scrollUp()},30);
      objScroll.scrollTop++;
     }
     function scrollUp(){
      if(objScroll.scrollTop % json.height==0){
       clearInterval(timer);
       setTimeout(startScroll,2000);
      }else{
       objScroll.scrollTop++;
       if(objScroll.scrollTop >= objScroll.scrollHeight/2){
        objScroll.scrollTop =0;
       }
      }
     }
     setTimeout(startScroll,1000);
    }
   }
  })()
  window.onload=function(){
   //on:间歇滚动/无缝滚动 height:间歇滚动的高度
   scrollUp({on:true,id:'block'});
   scrollUp({id:'block2',height:120});
  }
  
 </script>
</head>
<body>
 <div class="box">
  <div class="block" id="block">
   <div class="item">1无缝滚动</div>
   <div class="item">2无缝滚动</div>
   <div class="item">3无缝滚动</div>
   <div class="item">4无缝滚动</div>
   <div class="item">5无缝滚动</div>
   <div class="item">6无缝滚动</div>
   <div class="item">7无缝滚动</div>
   <div class="item">8无缝滚动</div>
   <div class="item">9无缝滚动</div>
   <div class="item">10无缝滚动</div>
   <div class="item">11无缝滚动</div>
   <div class="item">12无缝滚动</div>
   <div class="item">13无缝滚动</div>
   <div class="item">14无缝滚动</div>
   <div class="item">15无缝滚动</div>
  </div>
 </div>
 <div class="box">
  <div class="block" id="block2">
   <div class="item">1间歇滚动</div>
   <div class="item">2间歇滚动</div>
   <div class="item">3间歇滚动</div>
   <div class="item">4间歇滚动</div>
   <div class="item">5间歇滚动</div>
   <div class="item">6间歇滚动</div>
   <div class="item">7间歇滚动</div>
   <div class="item">8间歇滚动</div>
   <div class="item">9间歇滚动</div>
   <div class="item">10间歇滚动</div>
   <div class="item">11间歇滚动</div>
   <div class="item">12间歇滚动</div>
   <div class="item">13间歇滚动</div>
   <div class="item">14间歇滚动</div>
   <div class="item">15间歇滚动</div>
  </div>
 </div>
</body>
</html>

注意点:
1.盒子块要css 溢出隐藏:overflow:hidden
2.有两个功能:间歇滚动/无缝滚动
3.先复制一块一模一样的代码,无缝滚动:执行定时器一直增加scrollTop值,当scrollTop值大于盒子高度,在设置scrollTop为0,重新来过。间歇滚动在此基础上加了setTimeout,间歇执行,在scrollTop到达指定的height停止
4.疑问:代码中setInterval(function(){scrollIng()},30);这样写才可以执行,setInterval('scrollIng()',30);这样就不行,有没有大神指导下,两者有啥区别?是啥机制?

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 源码分析笔记(3) Deferred机制
Jun 19 Javascript
玩转jQuery按钮 请告诉我你最喜欢哪些?
Jan 08 Javascript
css+js实现部分区域高亮可编辑遮罩层
Mar 04 Javascript
基于JavaScript实现仿京东图片轮播效果
Nov 06 Javascript
Bootstrap入门书籍之(一)排版
Feb 17 Javascript
jQuery ajax全局函数处理session过期后的ajax跳转问题
Jun 03 Javascript
javascript函数的四种调用模式
Jan 08 Javascript
JS中type=&quot;button&quot;和type=&quot;submit&quot;的区别
Jul 04 Javascript
Angular.js中上传指令ng-upload的基本使用教程
Jul 30 Javascript
AngularJS监听ng-repeat渲染完成的两种方法
Jan 16 Javascript
JavaScript设计模式--简单工厂模式定义与应用案例详解
May 23 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
Oct 28 Javascript
js精准的倒计时函数分享
Jun 29 #Javascript
jQuery模仿京东/天猫商品左侧分类导航菜单效果
Jun 29 #Javascript
RequireJS多页面应用实例分析
Jun 29 #Javascript
全面了解JS中的匿名函数
Jun 29 #Javascript
大型JavaScript应用程序架构设计模式
Jun 29 #Javascript
基于JS模仿windows文件按名称排序效果
Jun 29 #Javascript
JavaScript中闭包的写法和作用详解
Jun 29 #Javascript
You might like
在laravel框架中使用model层的方法
2019/10/08 PHP
JavaScript和JQuery实用代码片段(一)
2010/04/07 Javascript
js当一个变量为函数时 应该注意的一点细节小结
2011/12/29 Javascript
jquery获取复选框被选中的值
2014/03/22 Javascript
js实现仿阿里巴巴城市选择框效果实例
2015/06/24 Javascript
JS+CSS实现精美的二级导航效果代码
2015/09/17 Javascript
JS实现的颜色实时渐变效果完整实例
2016/03/25 Javascript
浅析jquery如何判断滚动条滚到页面底部并执行事件
2016/04/29 Javascript
在javascript中创建对象的各种模式解析
2016/05/16 Javascript
Bootstrap学习笔记之css组件(3)
2016/06/07 Javascript
javaScript中封装的各种写法示例(推荐)
2017/07/03 Javascript
JS实现图片放大镜插件详解
2017/11/06 Javascript
javascript实现循环广告条效果
2017/12/12 Javascript
react中使用swiper的具体方法
2018/05/15 Javascript
vue项目部署上线遇到的问题及解决方法
2018/06/10 Javascript
webpack4简单入门实例
2018/09/06 Javascript
layui文件上传控件带更改后数据传值的方法
2019/09/23 Javascript
layui form.render('select', 'test2') 更新渲染的方法
2019/09/27 Javascript
ES6实现图片切换特效代码
2020/01/14 Javascript
ant-design-vue 快速避坑指南(推荐)
2020/01/21 Javascript
Python 基础教程之包和类的用法
2017/02/23 Python
python3.5 tkinter实现页面跳转
2018/01/30 Python
Python实现的用户登录系统功能示例
2018/02/05 Python
Python多线程编程之多线程加锁操作示例
2018/09/06 Python
python支持多线程的爬虫实例
2019/12/21 Python
pytorch中tensor张量数据类型的转化方式
2019/12/31 Python
python批量提取图片信息并保存的实现
2021/02/05 Python
Python 的 f-string 可以连接字符串与数字的原因解析
2021/02/20 Python
Hurley官方网站:扎根于海滩生活方式的全球青年文化品牌
2020/05/18 全球购物
幼儿园实习生辞职信
2014/01/20 职场文书
革命先烈的英雄事迹材料
2014/02/15 职场文书
公务员试用期满考核材料
2014/05/22 职场文书
经营理念口号
2014/06/21 职场文书
小学生自我评价100字(15篇)
2014/09/18 职场文书
部门经理迟到检讨书
2015/02/16 职场文书
Nginx优化服务之网页压缩的实现方法
2021/03/31 Servers