以下是 jQuery文字逐行向上滚动代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!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>
</body>
</html>
CSS代码(index.css):
@charset "utf-8";/* author lyc */
*{margin:0px;padding:0px;font-family:'微软雅黑';-webkit-tap-highlight-color:rgba(0,0,0,0);}
li{list-style:none}
img{border:none}
a{text-decoration:none;}
body{}
/* -------------------------摇奖排行榜----------------------------------- */
.Top_Record{}
.record_Top{width:90%;height:50px;background:url(../images/record_Bg.png) center center no-repeat;background-size:contain;text-align:center;line-height:50px;margin:30px auto 0px;color:#fff;}
.topRec_List dl,.maquee{width:90%;overflow:hidden;margin:0 auto;color:#7C7C7C}
.topRec_List dd{float:left;text-align:center;border-bottom:1px solid #1B96EE;color:#1B96EE;}
.topRec_List dl dd:nth-child(1){width:17%;height:40px;line-height:40px;}
.topRec_List dl dd:nth-child(2){width:18%;height:40px;line-height:40px;}
.topRec_List dl dd:nth-child(3){width:25%;height:40px;line-height:40px;}
.topRec_List dl dd:nth-child(4){width:40%;height:40px;line-height:40px;}
.maquee{height:195px;}
.topRec_List ul{width:100%;height:195px;}
.topRec_List li{width:100%;height:38px;line-height:38px;text-align:center;font-size:12px;border-bottom:1px dashed #aaa;}
/*.topRec_List li:nth-child(2n){background:#077cd0}
*/
.topRec_List li div{float:left;}
.topRec_List li div:nth-child(1){width:17%;}
.topRec_List li div:nth-child(2){width:18%;}
.topRec_List li div:nth-child(3){width:25%;}
.topRec_List li div:nth-child(4){width:40%;}
.apple a{display:block;text-decoration:none;}
.apple,.aa{width:90%;height:50px;overflow:hidden;margin:30px auto;border:1px solid #1B96EE;}
.apple a,.aa a{width:100%;height:50px;line-height:50px;text-indent:20px;color:#1B96EE;}
.aa{word-wrap:break-word;line-height:50px;color:#1B96EE;}
分享到QQ
分享到微博
微信扫一扫
