<!doctype html>
<html>
<head>
<meta charset=
"utf-8"
>
<title>www.jb51.net jQuery文字逐行向上滚动代码</title>
<link href=
"css/index.css"
rel=
"external nofollow"
rel=
"stylesheet"
type=
"text/css"
>
<script src=
"http://libs.baidu.com/jquery/2.0.0/jquery.min.js"
></script>
<style>
*{ 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;}
.Top_Record{}
.record_Top{width:90%; height:50px; text-align:center; line-height:50px; margin:30px auto 0px; color:#000;}
.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 p{ float:left;}
.topRec_List li p:nth-child(1){ width:17%;}
.topRec_List li p:nth-child(2){ width:18%;}
.topRec_List li p:nth-child(3){ width:25%;}
.topRec_List li p: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;}
</style>
</head>
<body>
<p
class
=
"Top_Record"
>
<p
class
=
"record_Top"
>摇奖排行榜</p>
<p
class
=
"topRec_List"
>
<dl>
<dd>编号</dd>
<dd>姓名</dd>
<dd>奖项</dd>
<dd>时间</dd>
</dl>
<p
class
=
"maquee"
>
<ul>
<li>
<p>1</p>
<p>王**</p>
<p>中了30元</p>
<p>2014/12/30 14:20</p>
</li>
<li>
<p>2</p>
<p>王**</p>
<p>中了30元</p>
<p>2014/12/30 14:20</p>
</li>
<li>
<p>3</p>
<p>王**</p>
<p>中了30元</p>
<p>2014/12/30 14:20</p>
</li>
<li>
<p>4</p>
<p>王**</p>
<p>中了30元</p>
<p>2014/12/30 14:20</p>
</li>
<li>
<p>5</p>
<p>王**</p>
<p>中了30元</p>
<p>2014/12/30 14:20</p>
</li>
<li>
<p>6</p>
<p>王**</p>
<p>中了30元</p>
<p>2014/12/30 14:20</p>
</li>
<li>
<p>7</p>
<p>王**</p>
<p>中了30元</p>
<p>2014/12/30 14:20</p>
</li>
<li>
<p>8</p>
<p>王**</p>
<p>中了30元</p>
<p>2014/12/30 14:20</p>
</li>
</ul>
</p>
</p>
</p>
<script type=
"text/javascript"
>
function
autoScroll(obj){
$(obj).find(
"ul"
).animate({
marginTop :
"-39px"
},1000,
function
(){
$(this).css({marginTop :
"0px"
}).find(
"li:first"
).appendTo(this);
})
}
$(
function
(){
var
scroll=setInterval('autoScroll(
".maquee"
)',1500);
$(
".maquee"
).hover(
function
(){
console.log(
"aaa"
);
clearInterval(scroll);
},
function
(){
scroll=setInterval('autoScroll(
".maquee"
)',1500);
});
});
</script>
</body>
</html>