Html
    Css
    Js
* {
	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;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.8.3
 立即下载

js自动滚动图表

这段javascript代码实现了一个表格元素(

)的自动滚动效果。以下是代码的主要功能点:

获取元素:首先,通过getelementbyid和getelementsbytagname获取tbody1中的所有标签。

定义滚动函数: scrolltable接受四个参数:要滚动的dom元素,滚动速度,默认停留时间,以及一个高度偏移量。scrollup内部函数用于实际的向上滚动操作,它将第一个元素移动到末尾并更新


的margintop。

定时器处理: 使用setinterval创建一个定时器来执行scrollup,在给定的staytimer后滚动。当鼠标悬停在

上时,使用onmouseover停止定时器。当鼠标离开时,使用onmouseout重新启动定时器。

启动滚动: 如果trlist1中的元素数量大于8,则调用scrolltable开始滚动效果。

这个脚本适用于一个场景,其中


包含多个元素,当元素数量超过一定阈值时,会自动循环滚动显示这些元素。


0