在一些網(wǎng)頁中，我們會看到有一行或多行文字向上滾動，就像輪播一樣。那我們?nèi)绾螌崿F(xiàn)它呢，現(xiàn)在就開始吧！

　　單行文字

　html代碼

<div id="scrollDiv"> <ul> <li>百度 www.baidu.com</li> <li>腳本之家 www.jb51.net</li> <li>這是公告標題的第三行</li> <li>這是公告標題的第四行</li> <li>這是公告標題的第五行</li> <li>這是公告標題的第六行</li> <li>這是公告標題的第七行</li> <li>這是公告標題的第八行</li> </ul> </div>

?css樣式

<style>*{margin:0; padding:0;}#scrollDiv{width: 500px; height: 25px; line-height: 25px;/*這里的height是25px*/
margin:50px auto; overflow:hidden;}#scrollDiv li{height:25px; cursor:pointer;} </style>

jQuery程序

<script src="jquery-1.11.3.js"></script>

? <script>
? ? ? function autoscroll(obj){

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//這里的25px是#scrollDiv的高度

? ? ? ? ? $(obj).find("ul:first").animate({marginTop:"-25px"},1000,function(){
? ? ? ? ? ? ? $(this).css("marginTop","0px").find("li:first").appendTo(this)
? ? ? ? ? ?})/*$(this).css("marginTop","0px")這里也許會有人搞不明白，為什么又設為0。因為在ul向上移25px的時候，其第一個li會添加到ul的末尾，如果ul的marginTop不設為0的話，整個ul就會慢慢移出它的父盒子，最后使得它的父盒子變空，實現(xiàn)不了原本想要實現(xiàn)的效果。*/
? ? ? ?}
?$(document).ready(function(){
? ? ? setInterval('autoscroll("#scrollDiv")',1500)
?})
</script>

多行文字

這里的html代碼同上

css樣式

<style>*{margin:0; padding:0;}#scrollDiv{width: 500px; height: 100px; line-height: 25px;
margin:50px auto; overflow:hidden;}/*這里的height是100px*/#scrollDiv li{height:25px; cursor:pointer;} </style>

jQuery程序

<script src="jquery-1.11.3.js"></script> <script>function autoscroll(obj){$(obj).find("ul:first").animate({marginTop:"-100px"},500,function(){var str=$(this).css("marginTop","0px")for(var i=0;i<4;i++){/*這里的for循環(huán)目的是讓ul里的前四個li一起添加到ul的末尾，
實現(xiàn)多行文字滾動。i可以根據(jù)實際需要而定。*/str.find("li:first").appendTo(this)}})}$(document).ready(function(){setInterval('autoscroll("#scrollDiv")',1500)}) </script>

?

轉(zhuǎn)載于:https://www.cnblogs.com/lh101200/p/7570663.html

總結(jié)

以上是生活随笔為你收集整理的jQuery实现文字向上滚动的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。