简单实现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 window.event对象详尽解析
Feb 17 Javascript
解决jquery中美元符号命名冲突问题
Jan 08 Javascript
浅谈javascript的call()、apply()、bind()的用法
Feb 21 Javascript
深入解析JavaScript中的立即执行函数
May 21 Javascript
ajax分页效果(bootstrap模态框)
Jan 23 Javascript
php register_shutdown_function函数详解
Jul 23 Javascript
js数组实现权重概率分配
Sep 12 Javascript
javascript实现循环广告条效果
Dec 12 Javascript
vue select组件的使用与禁用实现代码
Apr 10 Javascript
微信小程序实现带缩略图轮播效果
Nov 04 Javascript
微信小程序实现文字跑马灯
May 26 Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
May 15 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引用符&amp;的用法详细解析
2013/08/22 PHP
php的declare控制符和ticks教程(附示例)
2014/03/21 PHP
利用PHP扩展Xhprof分析项目性能实践教程
2018/09/05 PHP
yii2.0框架实现上传excel文件后导入到数据库的方法示例
2020/04/13 PHP
jQuery图片的展开和收缩实现代码
2013/04/16 Javascript
For循环中分号隔开的3部分的执行顺序探讨
2014/05/27 Javascript
js实现无限级树形导航列表效果代码
2015/09/23 Javascript
有关JavaScript中call()和apply() 的一些理解
2016/05/20 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
2016/08/13 Javascript
JS正则表达式之非捕获分组用法实例分析
2016/12/28 Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
2017/04/29 Javascript
手把手搭建安装基于windows的Vue.js运行环境
2017/06/12 Javascript
结合mint-ui移动端下拉加载实践方法总结
2017/11/08 Javascript
node vue项目开发之前后端分离实战记录
2017/12/13 Javascript
JS实现百度搜索接口及链接功能实例代码
2018/02/02 Javascript
vue实现Input输入框模糊查询方法
2021/01/29 Javascript
p5.js码绘“跳动的小正方形”的实现代码
2019/10/22 Javascript
React冒泡和阻止冒泡的应用详解
2020/08/18 Javascript
Python切片知识解析
2016/03/06 Python
Python实现字符串逆序输出功能示例
2017/06/24 Python
python正则表达式之对号入座篇
2018/07/24 Python
python将秒数转化为时间格式的实例
2018/09/16 Python
Python读写Excel表格的方法
2021/03/02 Python
css3 实现元素弧线运动的示例代码
2020/04/24 HTML / CSS
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
2013/01/30 HTML / CSS
运动服饰每月订阅盒:Ellie
2018/04/29 全球购物
英国鹦鹉店:Parrot Essentials
2018/12/03 全球购物
优秀班主任事迹材料
2014/12/16 职场文书
文员岗位职责
2015/02/04 职场文书
出国留学英文自荐信
2015/03/25 职场文书
离职证明范本
2015/06/12 职场文书
2015年主婚人婚礼致辞
2015/07/28 职场文书
2016七夕情人节感言
2015/12/09 职场文书
pygame面向对象的飞行小鸟实现(Flappy bird)
2021/04/01 Python
Vue实现动态查询规则生成组件
2021/05/27 Vue.js
Win11任务栏无法正常显示 资源管理器不停重启的解决方法
2022/07/07 数码科技