DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery常見問題 >> jQuery多行文字逐行向上滾動
jQuery多行文字逐行向上滾動
編輯:JQuery常見問題     
在線預覽:http:///keleyi/phtml/jqtexiao/32.htm


HTML代碼如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery文字逐行向上滾動代碼 - </title>
<link href="http:///keleyi/phtml/jqtexiao/32/keleyi.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http:///keleyi/pmedia/jquery/jquery-1.11.2.min.js"></script>
</head>

<body>

<!-- -------------搖獎排行榜--------------- -->
<div class="Top_Record">
<div class="record_Top"><p>搖獎排行榜</p></div>
<div class="topRec_List">
<dl>
<dd>編號</dd>
<dd>姓名</dd>
<dd>獎項</dd>
<dd>時間</dd>
</dl>
<div class="maquee">
<ul>
<li>
<div>1</div>
<div>王**</div>
<div>中了30元</div>
<div>2014/12/30 14:20</div>
</li>
<li>
<div>2</div>
<div>王**</div>
<div>中了30元</div>
<div>2014/12/30 14:20</div>
</li>
<li>
<div>3</div>
<div></div>
<div>中了20元</div>
<div>2015/01/10 08:20</div>
</li>
<li>
<div>4</div>
<div>王**</div>
<div>中了30元</div>
<div>2014/12/30 14:20</div>
</li>
<li>
<div>5</div>
<div>HoverTree</div>
<div>中了3000元</div>
<div>2015/01/10 14:20</div>
</li>
<li>
<div>6</div>
<div>王**</div>
<div>中了30元</div>
<div>2014/12/30 14:20</div>
</li>
<li>
<div>7</div>
<div>王**</div>
<div>中了30元</div>
<div>2014/12/30 14:20</div>
</li>
<li>
<div>8</div>
<div>王**</div>
<div>中了30元</div>
<div>2014/12/30 14:20</div>
</li>
</ul>
</div>
</div>
</div>


<div class="apple">
<ul>
<li><a href="http:///" target="_blank">你是我的小丫小蘋果 </a></li>
<li><a href="http:///" target="_blank">怎麼愛你都不嫌多</a></li>
<li><a href="http:///" target="_blank">紅紅的小臉兒溫暖我的心窩 </a></li>
<li><a href="http:///" target="_blank">點亮我生命的火 火火火火</a></li>
<li><a href="http:///" target="_blank">你是我的小丫小蘋果 </a></li>
<li><a href="http:///" target="_blank">就像天邊最美的雲朵</a></li>
<li><a href="http:///" target="_blank">春天又來到了花開滿山坡 </a></li>
<li><a href="http:///" target="_blank">種下希望就會收獲</a></li>
</ul>
</div>


<script type="text/javascript">

function autoScroll(obj){
$(obj).find("ul").animate({
marginTop : "-39px"
},500,function(){
$(this).css({marginTop : "0px"}).find("li:first").appendTo(this);
})
}
$(function(){
setInterval('autoScroll(".maquee")',3000);
setInterval('autoScroll(".apple")',2000);

})

</script>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>適用浏覽器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
<p><a href="http:///" target="_blank">首頁</a> <a href="http:///a/bjae/35j0kko4.htm" target="_blank">原文</a></p>
</div>
</body>
</html>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved