* {
margin:0;
padding:0;
}
html {
height:100%;
box-sizing:border-box;
}
body {
height:100%;
margin:0;
padding:0;
-moz-osx-font-smoothing:grayscale;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
font-family:PingFang SC,Microsoft YaHei,Hiragino Sans GB,Helvetica Neue,Helvetica,Arial,sans-serif;
line-height:initial !important;
}
ul,ol {
list-style:none;
}
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div,tr {
margin:0;
padding:0;
}
li {
list-style-type:none;
}
img {
border:0 none;
}
a,a:active,a:hover,a:visited {
text-decoration:none;
outline:none;
color:inherit;
}
i {
font-style:normal;
}
input:focus {
outline:none;
}
.clearfix {
zoom:1;
}
.clearfix:after {
content:"";
clear:both;
display:block;
height:0;
overflow:hidden;
visibility:hidden;
}
.student_wrapper {
width:568px;
padding:20px 24px 0px 24px;
border-radius:8px;
margin:20px auto;
box-sizing:border-box;
box-shadow:0px 4px 10px 0px rgba(33,48,182,0.08);
}
.student_wrapper .student_table {
float:left;
width:520px;
}
.student_wrapper .student_table a {
display:block;
}
.student_wrapper .student_table .table_dd {
width:100%;
height:384px;
overflow:hidden;
}
.student_wrapper .student_table dt {
float:left;
height:36px;
line-height:36px;
background:#F6F7FA;
font-size:13px;
color:#424968;
padding:0 16px 0 16px;
box-sizing:border-box;
}
.student_wrapper .student_table dt.dcon3 {
text-align:right;
}
.student_wrapper .student_table dd {
float:left;
height:64px;
line-height:64px;
font-size:14px;
color:#1B2559;
padding:0 16px 0 16px;
border-top:1px solid #F6F6F6;
box-sizing:border-box;
cursor:pointer;
white-space:nowrap;
}
.student_wrapper .student_table dd.dcon1 .city {
font-weight:500;
line-height:24px;
margin-top:10px;
}
.student_wrapper .student_table dd.dcon1 .province {
font-size:12px;
color:#A3AED0;
line-height:12px;
margin-top:5px;
}
.student_wrapper .student_table dd.dcon3 {
text-align:right;
color:#5961FB;
font-weight:500;
}
.student_wrapper .student_table .dcon1 {
width:130px;
}
.student_wrapper .student_table .dcon2 {
width:130px;
}
.student_wrapper .student_table .dcon3 {
width:130px;
}
.student_wrapper .student_table .dcon4 {
width:130px;
}
这段javascript代码实现了一个表格元素(
)的自动滚动效果。以下是代码的主要功能点:
获取元素:首先,通过getelementbyid和getelementsbytagname获取tbody1中的所有标签。
定义滚动函数: scrolltable接受四个参数:要滚动的dom元素,滚动速度,默认停留时间,以及一个高度偏移量。scrollup内部函数用于实际的向上滚动操作,它将第一个元素移动到末尾并更新
的margintop。
定时器处理: 使用setinterval创建一个定时器来执行scrollup,在给定的staytimer后滚动。当鼠标悬停在
上时,使用onmouseover停止定时器。当鼠标离开时,使用onmouseout重新启动定时器。
启动滚动: 如果trlist1中的元素数量大于8,则调用scrolltable开始滚动效果。
包含多个元素,当元素数量超过一定阈值时,会自动循环滚动显示这些元素。