您的位置:首页 - jQuery
jQuery多行文字逐行向上滚动
在线预览:http://keleyi.com/keleyi/phtml/jqtexiao/32.htm


HTML代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery文字逐行向上滚动代码 - 柯乐义</title>
<link href="http://keleyi.com/keleyi/phtml/jqtexiao/32/keleyi.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://keleyi.com/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://keleyi.com/" target="_blank">你是我的小丫小苹果 </a></li>
<li><a href="http://keleyi.com/" target="_blank">怎么爱你都不嫌多</a></li>
<li><a href="http://keleyi.com/" target="_blank">红红的小脸儿温暖我的心窝 </a></li>
<li><a href="http://keleyi.com/" target="_blank">点亮我生命的火 火火火火</a></li>
<li><a href="http://keleyi.com/" target="_blank">你是我的小丫小苹果 </a></li>
<li><a href="http://keleyi.com/" target="_blank">就像天边最美的云朵</a></li>
<li><a href="http://keleyi.com/" target="_blank">春天又来到了花开满山坡 </a></li>
<li><a href="http://keleyi.com/" 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://keleyi.com/" target="_blank">首页</a> <a href="http://keleyi.com/a/bjae/35j0kko4.htm" target="_blank">原文</a></p>
</div>
</body>
</html>
本站导航
相关文章
柯乐义 Copyright© keleyi.com