* { 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开始滚动效果。
包含多个元素,当元素数量超过一定阈值时,会自动循环滚动显示这些元素。