<!doctype html>
<html>
<head>
<meta charset="utf-8">
<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>2021-01-01</div>
</li>
<li>
<div>1</div>
<div>王</div>
<div>30</div>
<div>2021-01-01</div>
</li>
<li>
<div>1</div>
<div>王</div>
<div>30</div>
<div>2021-01-01</div>
</li>
</ul>
</div>
</div>
</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")',1000);
})
</script>
</body>
</html>
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;}