jQuery实现动态向上滚动

本文实例为大家分享了jQuery实现动态向上滚动的具体代码，供大家参考，具体内容如下

总结：概括滚动的新闻、字幕、图片：两个最核心功能 ：

1、”永动“（infinite）

2、循环

js实现”永动“（infinite） 的实现方法离不开定时器setInterval()，也就是说每过一段时间都要执行一次某个函数，从而实现无休止滚动；

而循环的实现：appendTo()或者append,三目运算符（或者 if else）,insertBefore()或者prepend()等等好多种方法。

代码：

* {
 margin:0;
 padding:0;
}
body {
 font-family:'microsoft yahei';
 background:#fff;
 overflow:hidden;
}
#demo1,#demo2 {
 width:1000px;
 height:40px;
 line-height:30px;
 margin:50px auto;
 overflow:hidden;
 background:#f60;
 color:#fff;
 padding:10px;
 box-sizing:border-box;
}
#demo2 {
 height:90px;
}
#demo2 a {
 display:block;
 text-decoration:none;
 color:#fff;
}
#demo3 {
 width:1000px;
 height:400px;
 overflow:hidden;
 background:#f60;
 color:#fff;
 margin:50px auto;
 padding:10px;
 box-sizing:border-box;
}





 
 
 向幸福生活致敬111！
 
 
 向幸福生活致敬222！
 
 
 向幸福生活致敬333！
 
 
 向幸福生活致敬111！
 
 



 第一条新闻
 第二条新闻
 第三条动态




 

 
恭喜133****1062用户获得10元手机话费

 
恭喜153****0792用户获得50元助学代金券

 
恭喜153****3890用户获得330元上课大礼包

 
恭喜189****0883用户获得330元上课大礼包

 
恭喜133****6823用户获得1500元现金

 
恭喜153****5050用户获得330元上课大礼包
 
 

再为大家分享一段之前收藏的代码：jQuery文字逐行向上滚动代码：

实现原理：整体向上滚动一行距离后，将第一行appendTo最后一行

 

 
你是我的小丫小苹果 
 
  
怎么爱你都不嫌多
 
  
红红的小脸儿温暖我的心窝 
 
  
点亮我生命的火 火火火火
 
  
你是我的小丫小苹果 
 
  
就像天边最美的云朵
 
  
春天又来到了花开满山坡 
 
  
种下希望就会收获
 
 
 

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