简单实现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 相关文章推荐
半角全角相互转换的js函数
Oct 16 Javascript
JavaScript设置IFrame高度自适应(兼容各主流浏览器)
Jun 05 Javascript
file控件选择上传文件确定后触发的js事件是哪个
Mar 17 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
Sep 26 Javascript
javascript特殊日历控件分享
Mar 07 Javascript
微信小程序 下拉菜单简单实例
Apr 13 Javascript
Vue实现导出excel表格功能
Mar 30 Javascript
webpack多入口多出口的实现方法
Aug 17 Javascript
webuploader分片上传的实现代码(前后端分离)
Sep 10 Javascript
使用JavaScript解析URL的方法示例
Mar 01 Javascript
vue实现带复选框的树形菜单
May 27 Javascript
基于element-ui对话框el-dialog初始化的校验问题解决
Sep 11 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
PHP+ACCESS 文章管理程序代码
2010/06/21 PHP
YII视图整合kindeditor扩展的方法
2016/07/13 PHP
php版微信发红包接口用法示例
2016/09/23 PHP
laravel框架实现敏感词汇过滤功能示例
2020/02/15 PHP
jquery offset函数应用实例
2012/11/14 Javascript
jQuery插件pagewalkthrough实现引导页效果
2015/07/05 Javascript
值得分享的bootstrap table实例
2016/09/22 Javascript
JS瀑布流实现方法实例分析
2016/12/19 Javascript
Angular2 自定义validators的实现方法
2017/07/05 Javascript
Underscore之Array_动力节点Java学院整理
2017/07/10 Javascript
详解用函数式编程对JavaScript进行断舍离
2017/09/18 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
2018/01/24 Javascript
Jquery获取radio选中值实例总结
2019/01/17 jQuery
微信小程序后台持续定位功能使用详解
2019/08/23 Javascript
微信小程序实现点击按钮后修改颜色
2019/12/05 Javascript
Vue $attrs &amp; inheritAttr实现button禁用效果案例
2020/12/07 Vue.js
通过vue.extend实现消息提示弹框的方法记录
2021/01/07 Vue.js
跟老齐学Python之一个免费的实验室
2014/09/14 Python
Python聚类算法之基本K均值实例详解
2015/11/20 Python
python虚拟环境virtualenv的安装与使用
2017/09/21 Python
matplotlib subplots 调整子图间矩的实例
2018/05/25 Python
Python 读写文件的操作代码
2018/09/20 Python
详解Python爬取并下载《电影天堂》3千多部电影
2019/04/26 Python
python实现集中式的病毒扫描功能详解
2019/07/09 Python
Python爬虫使用浏览器cookies:browsercookie过程解析
2019/10/22 Python
python wav模块获取采样率 采样点声道量化位数(实例代码)
2020/01/22 Python
用Python绘制漫步图实例讲解
2020/02/26 Python
python程序输出无内容的解决方式
2020/04/09 Python
Python实现爬取网页中动态加载的数据
2020/08/17 Python
Larsson & Jennings官网:现代瑞士钟表匠
2018/03/20 全球购物
Unix/Linux开发面试题
2016/08/16 面试题
绿色城市实施方案
2014/03/19 职场文书
单位委托书范本
2014/04/04 职场文书
宾馆前台接待岗位职责
2015/04/02 职场文书
生产车间管理制度
2015/08/04 职场文书
2016年幼儿园庆六一开幕词
2016/03/04 职场文书