简单实现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 相关文章推荐
在视频前插入广告
Nov 20 Javascript
js 判断checkbox是否选中的操作方法
Nov 09 Javascript
jquery 获取dom固定元素 添加样式的简单实例
Feb 04 Javascript
JavaScript使用RegExp进行正则匹配的方法
Jul 11 Javascript
Javascript实现Array和String互转换的方法
Dec 21 Javascript
基于angularjs实现图片放大镜效果
Aug 31 Javascript
原生JS实现小小的音乐播放器
Oct 16 Javascript
原生js检测页面加载完毕的实例
Sep 11 Javascript
微信小程序+腾讯地图开发实现路径规划绘制
May 22 Javascript
使用Vue调取接口,并渲染数据的示例代码
Oct 28 Javascript
js实现简单点赞操作
Mar 17 Javascript
js实现省级联动(数据结构优化)
Jul 17 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
转生史莱姆:萌王第一次撸串开心到飞起,哥布塔撸串却神似界王神
2018/11/30 日漫
php中限制ip段访问、禁止ip提交表单的代码分享
2014/08/22 PHP
php实现的Cookies操作类实例
2014/09/24 PHP
JQUERY获取form表单值的代码
2010/07/17 Javascript
JavaScript中获取未知对象属性的代码
2011/04/27 Javascript
jsp+javascript打造级连菜单的实例代码
2013/06/14 Javascript
Js数组排序函数sort()介绍
2015/06/08 Javascript
自己动手写的javascript前端等待控件
2015/10/30 Javascript
Angular发布1.5正式版,专注于向Angular 2的过渡
2016/02/18 Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
2016/08/25 Javascript
JavaScript 字符串常用操作小结(非常实用)
2016/11/30 Javascript
JS实现PC手机端和嵌入式滑动拼图验证码三种效果
2017/02/15 Javascript
JS区分Object与Aarry的六种方法总结
2017/02/27 Javascript
微信小程序动态显示项目倒计时效果
2017/06/13 Javascript
Vue中父组件向子组件通信的方法
2017/07/11 Javascript
原生js获取left值和top值的三种方法
2017/08/02 Javascript
mongoose更新对象的两种方法示例比较
2017/12/19 Javascript
小程序实现按下录音松开识别语音
2019/11/22 Javascript
mpvue实现微信小程序快递单号查询代码
2020/04/03 Javascript
通过数据库向Django模型添加字段的示例
2015/07/21 Python
Python中pymysql 模块的使用详解
2019/08/12 Python
python和php学习哪个更有发展
2020/06/17 Python
python 解决pycharm运行py文件只有unittest选项的问题
2020/09/01 Python
python 实现超级玛丽游戏
2020/11/25 Python
纯CSS3实现Material Design效果
2017/03/09 HTML / CSS
什么是静态路由?什么是动态路由?各自的特点是什么?
2015/09/16 面试题
小学生自我评价范文
2014/01/25 职场文书
研究生毕业鉴定
2014/01/29 职场文书
幼儿园教师奖惩制度
2014/02/01 职场文书
职务说明书范文
2014/05/07 职场文书
环保建议书300字
2014/05/14 职场文书
2014年大学生党员自我评议
2014/09/22 职场文书
书法社团活动总结
2015/05/07 职场文书
php png失真的原因及解决办法
2021/10/24 PHP
对讲机知识
2022/04/07 无线电
索尼ICF-5900W收音机测评
2022/04/24 无线电