简单实现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 树形结构的选择器
Feb 15 Javascript
JavaScript全局函数使用简单说明
Mar 11 Javascript
jquery退出each循环的写法
Feb 26 Javascript
js实现禁止中文输入的方法
Jan 14 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
Nov 29 Javascript
JS模态窗口返回值兼容问题的完美解决方法
May 28 Javascript
深入理解ECMAScript的几个关键语句
Jun 01 Javascript
JavaScript模块详解
Dec 18 Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
Mar 21 Javascript
React路由管理之React Router总结
May 10 Javascript
node.js部署之启动后台运行forever的方法
May 23 Javascript
angularJs select绑定的model取不到值的解决方法
Oct 08 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通过function_exists检测函数是否存在的方法
2015/03/18 PHP
PHP文件系统管理(实例讲解)
2017/09/19 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
js模拟实现Array的sort方法
2007/12/11 Javascript
xml分页+ajax请求数据源+dom取结果实例代码
2008/10/31 Javascript
JavaScript对象和字串之间的转换实例探讨
2013/04/21 Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
2014/12/26 Javascript
JavaScript实现Flash炫光波动特效
2015/05/14 Javascript
JavaScript实现Iterator模式实例分析
2015/06/09 Javascript
浅谈javascript获取元素transform参数
2015/07/24 Javascript
javascript实现类似java中getClass()得到对象类名的方法
2015/07/27 Javascript
JS实现弹出居中的模式窗口示例
2016/06/20 Javascript
详解Vue使用 vue-cli 搭建项目
2017/04/20 Javascript
详解Angular 4 表单快速入门
2017/06/05 Javascript
vuedraggable+element ui实现页面控件拖拽排序效果
2020/07/29 Javascript
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
2021/01/29 Javascript
[02:40]2014DOTA2 国际邀请赛中国区预选赛 四大豪门抵达华西村
2014/05/23 DOTA
python 文件操作删除某行的实例
2017/09/04 Python
python基础之包的导入和__init__.py的介绍
2018/01/08 Python
Python装饰器的执行过程实例分析
2018/06/04 Python
实践Vim配置python开发环境
2018/07/02 Python
Python实现通过解析域名获取ip地址的方法分析
2019/05/17 Python
离线状态下在jupyter notebook中使用plotly实例
2020/04/24 Python
基于Keras中Conv1D和Conv2D的区别说明
2020/06/19 Python
Python中lru_cache的使用和实现详解
2021/01/25 Python
使用CSS3的appearance属性改变元素的外观的方法
2015/12/12 HTML / CSS
Claire’s法国:时尚配饰、美容、珠宝、头发
2021/01/16 全球购物
如何写好优秀的创业计划书
2014/01/30 职场文书
医院合作协议书
2014/08/19 职场文书
好的促销活动方案
2014/08/21 职场文书
旷工检讨书1000字
2015/01/01 职场文书
高中生自我评价范文2015
2015/03/03 职场文书
新党员入党决心书
2015/09/22 职场文书
pandas 操作 Excel操作总结
2021/03/31 Python
MySQL时间设置注意事项的深入总结
2021/05/06 MySQL
python中redis包操作数据库的教程
2022/04/19 Python