简单实现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 相关文章推荐
一个选择最快的服务器转向代码
Apr 27 Javascript
jQuery之ajax删除详解
Feb 27 Javascript
js用Date对象的setDate()函数对日期进行加减操作
Sep 18 Javascript
JS实现动态生成表格并提交表格数据向后端
Nov 25 Javascript
jQuery简单实现tab选项卡切换效果
Jun 20 Javascript
js时间比较 js计算时间差的简单实现方法
Aug 26 Javascript
AngularJs 指令详解及示例代码
Sep 01 Javascript
AngularJS自定义服务与fliter的混合使用
Nov 24 Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
Dec 30 Javascript
微信小程序实战之轮播图(3)
Apr 17 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
Apr 25 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
Sep 29 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开发入门教程之面向对象
2006/12/05 PHP
Discuz板块横排显示图片的实现方法
2007/05/28 PHP
destoon利用Rewrite规则设置网站安全
2014/06/21 PHP
php比较相似字符串的方法
2015/06/05 PHP
PHP实现简单实用的验证码类
2015/07/29 PHP
php二维码生成
2015/10/19 PHP
php一个文件搞定微信jssdk配置
2016/12/12 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
JavaScript使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法
2011/05/28 Javascript
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
2012/07/31 Javascript
jQuery对html元素取值与赋值的方法
2013/11/20 Javascript
Javascript this 关键字 详解
2014/10/22 Javascript
Bootstrap每天必学之按钮
2015/11/26 Javascript
BootStrap和jQuery相结合实现可编辑表格
2016/04/21 Javascript
Javascript之Math对象详解
2016/06/07 Javascript
layer.confirm取消按钮绑定事件的方法
2018/08/17 Javascript
JavaScript的词法结构精华篇
2018/10/17 Javascript
VUE项目axios请求头更改Content-Type操作
2020/07/24 Javascript
js实现移动端图片滑块验证功能
2020/09/29 Javascript
你不知道的SpringBoot与Vue部署解决方案
2020/11/09 Javascript
Python自动调用IE打开某个网站的方法
2015/06/03 Python
在Django的URLconf中进行函数导入的方法
2015/07/18 Python
基于python select.select模块通信的实例讲解
2017/09/21 Python
Python可迭代对象操作示例
2019/05/07 Python
Python3+selenium实现cookie免密登录的示例代码
2020/03/18 Python
利用pipenv和pyenv管理多个相互独立的Python虚拟开发环境
2020/11/01 Python
python用opencv 图像傅里叶变换
2021/01/04 Python
Bootstrap 学习分享
2012/11/12 HTML / CSS
怎样创建、运行java程序
2014/08/01 面试题
《争吵》教学反思
2014/02/15 职场文书
新教师工作感言
2014/02/16 职场文书
体育教师个人的自我评价
2014/02/16 职场文书
五星级酒店餐饮部总监的标准岗位职责
2014/02/17 职场文书
公司采购主管岗位职责
2014/06/17 职场文书
应届大学生自荐书
2014/06/17 职场文书
商务英语专业求职信
2014/06/26 职场文书