栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

简单实现js间歇或无缝滚动效果

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

简单实现js间歇或无缝滚动效果

间歇、无缝滚动效果(用gif录制的效果不是很好,有兴趣的可以down代码),具体内容如下

代码:




 
 无缝滚动
 
  *{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}
 
 


 
  
   1无缝滚动
   2无缝滚动
   3无缝滚动
   4无缝滚动
   5无缝滚动
   6无缝滚动
   7无缝滚动
   8无缝滚动
   9无缝滚动
   10无缝滚动
   11无缝滚动
   12无缝滚动
   13无缝滚动
   14无缝滚动
   15无缝滚动
  
 
 
  
   1间歇滚动
   2间歇滚动
   3间歇滚动
   4间歇滚动
   5间歇滚动
   6间歇滚动
   7间歇滚动
   8间歇滚动
   9间歇滚动
   10间歇滚动
   11间歇滚动
   12间歇滚动
   13间歇滚动
   14间歇滚动
   15间歇滚动
  
 

 

注意点:
1.盒子块要css 溢出隐藏:overflow:hidden
2.有两个功能:间歇滚动/无缝滚动
3.先复制一块一模一样的代码,无缝滚动:执行定时器一直增加scrollTop值,当scrollTop值大于盒子高度,在设置scrollTop为0,重新来过。间歇滚动在此基础上加了setTimeout,间歇执行,在scrollTop到达指定的height停止
4.疑问:代码中setInterval(function(){scrollIng()},30);这样写才可以执行,setInterval('scrollIng()',30);这样就不行,有没有大神指导下,两者有啥区别?是啥机制?

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持考高分网。

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/95830.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号