Jquery文字一行一行向上滾動 效果是用了Jquery中animate這個方法實作的 相對來說是蠻簡單的 雖然是簡單點 還是要分享下 基本原理就是：運用了一個小技巧 滾動的高度和每個li的高度一樣的，先找到外層ul的容器 然後相對于外層的容器進行向上滾動 ul在css裡面沒有設定他的高度 預設情況下是n個li×li的高度 向上是marginTop： -li.height(每個li的高度);
* 當滾動到最後一個li時候 那麼最外層的容器應該滾動到0了 那麼我就把第一個li加到ul裡面去 這樣就實作了循環滾動
* 而不會滾動到最後一個就停止下來了 基本的HTML/CSS如下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
ul,li{list-style:none; margin:0; padding:0;}
.scroll{ width:500px; height:175px; overflow:hidden; border:1px solid #333; margin:50px auto 0;}
.scroll li{ width:500px; height:25px; line-height:25px; overflow:hidden;}
.scroll li a{ font-size:14px; font-family:"宋體";color:#333; text-decoration:none;}
.scroll li a:hover{ text-decoration:underline;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
</head>
<body>
<div class="scroll">
<ul class="list">
<li><a href="#" target="_blank">我來部落客的空間了</a></li>
</ul>
</div>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
JS代碼如下：
/**
* @author tugenhua
* @email [email protected]
* 一行一行文字向上滾動js
* 運用了Jquery中的animate動畫方法
* 運用了一個小技巧 滾動的高度和每個li的高度一樣
* 先找到外層ul的容器 然後相對于外層的容器進行向上滾動 ul沒有設定他的高度 預設情況下是n個li×li的高度 向上是marginTop： -li.height(每個li的高度);
* 當滾動到最後一個li時候 那麼最外層的容器應該滾動到0了 那麼我就把第一個li加到ul裡面去 這樣就實作了循環滾動
* 而不會滾動到最後一個就停止下來了
*/
function autoScroll(obj){
$(obj).find(".list").animate({
marginTop : "-25px"
},500,function(){
$(this).css({marginTop : "0px"}).find("li:first").appendTo(this);
})
}
$(function(){
setInterval('autoScroll(".scroll")',3000)
})
下面我上傳個附件 不明白的地方可以看看！
<a href="http://down.51cto.com/data/2359306" target="_blank">附件：http://down.51cto.com/data/2359306</a>
本文轉自 塗根華 51CTO部落格，原文連結：http://blog.51cto.com/tugenhua/719078，如需轉載請自行聯系原作者
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)