简单实现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 使用手册(五)
Sep 23 Javascript
JS图片放大效果简单实现代码
Sep 08 Javascript
js获取指定字符前/后的字符串简单实例
Oct 27 Javascript
jQuery插件zTree实现删除树节点的方法示例
Mar 08 Javascript
vue仿淘宝订单状态的tab切换效果
Jun 23 Javascript
JS实现字符串翻转的方法分析
Aug 31 Javascript
在vue中使用vue-echarts-v3的实例代码
Sep 13 Javascript
写一个Vue Popup组件
Feb 25 Javascript
详解vue中使用微信jssdk
Apr 19 Javascript
vue学习之Vue-Router用法实例分析
Jan 06 Javascript
微信小程序实现下拉加载更多商品
Dec 29 Javascript
html5 录制mp3音频支持采样率和比特率设置
Jul 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
给多个地址发邮件的类
2006/10/09 PHP
新浪SAE云平台下使用codeigniter的数据库配置
2014/06/12 PHP
详解PHP的Yii框架的运行机制及其路由功能
2016/03/17 PHP
一波PHP中cURL库的常见用法代码示例
2016/05/06 PHP
JavaScript Cookie的读取和写入函数
2009/12/08 Javascript
Javascript下判断是否为闰年的Datetime包
2010/10/26 Javascript
jquery中实现标签切换效果的代码
2011/03/01 Javascript
JQuery实现用户名无刷新验证的小例子
2013/03/22 Javascript
Js+Jq获取URL参数的集中方法示例代码
2014/05/20 Javascript
IE中图片的onload事件无效问题和解决方法
2014/06/06 Javascript
javascript函数式编程程序员的工具集
2015/10/11 Javascript
JS公共小方法之判断对象是否为domElement的实例
2016/11/25 Javascript
bootstrap使用validate实现简单校验功能
2016/12/02 Javascript
js学习总结_基于数据类型检测的四种方式(必看)
2017/07/04 Javascript
解决JS外部文件中文注释出现乱码问题
2017/07/09 Javascript
详解vue-cli+element-ui树形表格(多级表格折腾小计)
2019/04/17 Javascript
微信小程序class封装http代码实例
2019/08/24 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
2019/12/30 Javascript
[02:47]DOTA2英雄基础教程 野性怒吼兽王
2013/12/05 DOTA
Python使用functools模块中的partial函数生成偏函数
2016/07/02 Python
Python基于回溯法解决01背包问题实例
2017/12/06 Python
Python数据分析之获取双色球历史信息的方法示例
2018/02/03 Python
超实用的 30 段 Python 案例
2019/10/10 Python
手把手教你安装Windows版本的Tensorflow
2020/03/26 Python
Django后端分离 使用element-ui文件上传方式
2020/07/12 Python
Python中对象的比较操作==和is区别详析
2021/02/12 Python
html5仿支付宝密码框的实现代码
2017/09/06 HTML / CSS
HTML5自定义视频播放器源码
2020/01/06 HTML / CSS
中软国际Java程序员机试题
2012/08/19 面试题
快餐店的创业计划书范文
2014/01/29 职场文书
建设工程授权委托书
2014/09/22 职场文书
2015年医务人员医德医风自我评价
2015/03/03 职场文书
2015年干部教育培训工作总结
2015/05/15 职场文书
使用python向MongoDB插入时间字段的操作
2021/05/18 Python
Python 发送SMTP邮件的简单教程
2021/06/24 Python
详解CSS中postion和opacity及cursor的特性
2022/08/14 HTML / CSS