| |
<!doctype html> |
| |
<html> |
| |
<head> |
| |
<meta charset="utf-8"> |
| |
|
| |
<title>jQuery文字逐行向上滚动代码 - 站长素材</title> |
| |
<link href="css/index.css" rel="stylesheet" type="text/css"> |
| |
<script src="js/jquery.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>中了30元</div> |
| |
<div>2014/12/30 14: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>王**</div> |
| |
<div>中了30元</div> |
| |
<div>2014/12/30 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="#" target="_blank">你是我的小丫小苹果 </a></li> |
| |
<li><a href="#" target="_blank">怎么爱你都不嫌多</a></li> |
| |
<li><a href="#" target="_blank">红红的小脸儿温暖我的心窝 </a></li> |
| |
<li><a href="#" target="_blank">点亮我生命的火 火火火火</a></li> |
| |
<li><a href="#" target="_blank">你是我的小丫小苹果 </a></li> |
| |
<li><a href="#" target="_blank">就像天边最美的云朵</a></li> |
| |
<li><a href="#" target="_blank">春天又来到了花开满山坡 </a></li> |
| |
<li><a href="#" 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://sc.chinaz.com/" target="_blank">站长素材</a></p> |
| |
</div> |
| |
</body> |
| |
</html> |
| |
|