【前端常用功能效果】上下滚动的列表，滑过暂停滚动条也可以滚动；移除鼠标继续滚动

平底锅@小灰灰

已于 2024-04-25 14:16:56 修改

阅读量260

点赞数 4

文章标签： css 前端 css3 javascript

于 2024-04-03 09:34:16 首次发布

本文链接：https://blog.csdn.net/ztff123456/article/details/137328555

版权

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title></title>
    <meta name="author" content="duanwenzhuo 2022">
	<link rel="stylesheet" href="../css/echarts.css">
    <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
	<style>
		html,body {
			height:100%;
		}
		body {
			min-width:100px;
		}
	</style>
</head>
<body>
	<div class="tablePublicWrap">
		<div class="tablePublicThead">
			<table>
				<tr>
					<th width="50">序号</th>
					<th>表头1</th>
					<th>表头2</th>
					<th>表头3</th>
					<th>表头4</th>
					<th>表头5</th>
				</tr>
			</table>
		</div>
		<div class="tablePublicTbody">
			<div class="tablePublicTbodyScroll publicTableTbodyScroll1">
				<div class="tablePublicTbodys">
					<table>
						<tbody><tr><td width="50">1</td><td>内容1</td><td>8</td><td>8</td><td>2</td><td>8</td></tr><tr><td width="50">2</td><td>内容2</td><td>5</td><td>5</td><td>0</td><td>0</td></tr><tr><td width="50">3</td><td>内容3</td><td>7</td><td>5</td><td>0</td><td>1</td></tr><tr><td width="50">4</td><td>内容4</td><td>4</td><td>3</td><td>0</td><td>1</td></tr><tr><td width="50">5</td><td>内容5</td><td>5</td><td>7</td><td>1</td><td>2</td></tr><tr><td width="50">6</td><td>内容6</td><td>6</td><td>6</td><td>1</td><td>5</td></tr><tr><td width="50">7</td><td>内容7</td><td>21</td><td>21</td><td>12</td><td>19</td></tr><tr><td width="50">8</td><td>内容8</td><td>20</td><td>13</td><td>6</td><td>184</td></tr><tr><td width="50">9</td><td>内容8</td><td>5</td><td>3</td><td>0</td><td>4</td></tr><tr><td width="50">10</td><td>内容9</td><td>23</td><td>17</td><td>7</td><td>44</td></tr><tr><td width="50">11</td><td>内容10</td><td>8</td><td>3</td><td>7</td><td>13</td></tr><tr><td width="50">12</td><td>内容11</td><td>6</td><td>5</td><td>4</td><td>43</td></tr></tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
	<script>
		var ArrTimeInter2 = [];
		animateGdWzFun2(".publicTableTbodyScroll1");
		function animateGdWzFun2(Obj){ //滚动文字
			for (var i = ArrTimeInter2.length - 1; i >= 0; i--) {
				clearInterval(ArrTimeInter2[i]);
			};
			var ScrollTops = $(Obj).scroll().top || 0,
				Height    = $(Obj).height(),
				HeightAll = $(Obj).find("table").height()-10,
				Times = null;
			if(HeightAll>Height){
				function B(){
					ScrollTops = ScrollTops + 1;
					if(ScrollTops>HeightAll-Height){
						ScrollTops = 0;
					}
					$(Obj)[0].scrollTop = ScrollTops;
				}
				var C = function(){       //滚动的定时器方法。
					Times = window.setInterval(B,100);
					ArrTimeInter2.push(Times);
				};
				var D = function(){      // 取消定时器方法。
					window.clearInterval(Times);
				}
				$(Obj).hover(D,C).mouseout(); //滑过ul关闭定时器，移除打开定时器。
			}
		}
	</script>
</body>
</html>

echarts.css代码

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike,
strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td ,textarea,input {margin:0;padding:0;}
address,cite,dfn,em,var, i {font-style:normal;}
body {font-size:14px;font-family:"Microsoft Yahei","微软雅黑";color: #333;}
table { border-collapse:collapse;border-spacing:0;}
h1, h2, h3, h4, h5, h6, th { font-size:100%;font-weight:normal;}
button,input,select,textarea {font-size:100%;}
fieldset,img {border:0;}
a,img {-webkit-touch-callout:none;}
a,a:active,a:focus,a:hover,a:visited {text-decoration:none;}
input[type=password],input[type=text],textarea {
    resize:none;
    outline:0;
    -webkit-appearance:none;
    white-space:pre-wrap;
    word-wrap:break-word;
    background:#fff;
}
ul, ol {list-style:none;}
:focus {outline:none;}
strong,em,b {
	font-weight:normal;
	font-style:normal;
}
.clear {clear:both;} /**清楚浮动 **/
.ms-controller{  /**防止avalon初始没有值出现大括号 **/
   visibility: hidden;
}
@font-face {
    font-family: 'HYFY';
    src: local('fontname Regular'),
    local('fontname'),
    url('hyfy.TTF') format('truetype');
}
body {
	position:relative;
	min-width:1896px;
}
.publicBj {
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:-1;
}
.echartsWrap {
	position:relative;
	z-index:99;
	background:transparent;
	text-align:center;
	overflow:hidden;
	padding:15px 0;
}
.echartsWraps {
	display:inline-block;
	overflow:hidden;
	margin-left:30px;
}
.echartsSizePublic {
	float:left;
	border: 1px solid #044972;
	box-shadow: inset 0 0 18px rgb(4 73 114 / 90%);
	border-radius: 9px;
	padding-top: 33px;
	position: relative;
	box-sizing: border-box;
	margin:0 20px 20px 0
}
.echartsSize1 {
	width:600px;
	height:300px;
}
.echartsTitlePublic {
	position:absolute;
	top:0;
	left:0;
	right:0;
	z-index:9;
	padding:0 7px 1px;
}
.echartsTitlePublicMain {
	height: 31px;
	position: relative;
	border-bottom: 1px solid #00366f;
}
.echartsTitlePublic em {
	float: left;
	line-height: 30px;
	height: 100%;
	padding-left: 29px;
	overflow: hidden;
	background: url("../images/titlePublic.png") no-repeat left center;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
}
.echartsMainPublic {
	height:100%;
	box-sizing:border-box;
	position:relative;
	overflow:hidden;
}
.echartsContantPublic {
	height:100%;
}
.echartsContantAnimate1 {
	width:100%;
}
.echartsContantAnimate2 {
	width:200%;
}
.echartsContantAnimate3 {
	width:300%;
}
.echartsContantAnimate4 {
	width:400%;
}
.echartsContantPublicMain {
	float:left;
	height:100%;
}
.echartsWidthPublic1 {
	width:598px;
}
.echartsContantPublicMain iframe {
	width:100%;
	height:100%;
	border:none;
}
.echartsMain {
	width:100%;
	height:100%;
}
.tablePublicWrap {
	padding:35px 10px 10px;
	height:100%;
	box-sizing:border-box;
	position:relative;
}
.tablePublicThead {
	position:absolute;
	top:5px;
	left:10px;
	right:10px;
	z-index:99;
}
.tablePublicWrap table {
	width: 100%;
	table-layout: fixed;
}
.tablePublicWrap table tr th {
	height: 30px;
	vertical-align: middle;
	text-align: center;
	color: #fff;
	font-size: 12px;
}
.tablePublicWrap table tr td {
	height: 30px;
	vertical-align: middle;
	text-align: center;
	color: #fff;
	font-size: 12px;
}
.tablePublicTbody {
	overflow:hidden;
	height:100%;
}
.tablePublicTbodyScroll {
	max-height:100%;
	overflow-y:auto;
	width:calc(100% + 30px);
}
.tablePublicTbodys {
	overflow:hidden;
	width:calc(100% - 10px);
}
.tablePublicTbody table {
    border-collapse: separate;
    border-spacing: 0 6px;
}
.tablePublicTbody table tr {
	background-color: #143289;
}
.pieAnimateWrap {
	padding:15px;
	overflow:hidden;
	height:100%;
	box-sizing:border-box;
}
.pieAnimateScroll {
	width:calc(100% + 30px);
	max-height:100%;
	overflow:hidden;
	overflow-y:auto;
}
.pieAnimateWrap ul {
	width:calc(100% - 30px);
	overflow:hidden;
}
.pieAnimateWrap ul li {
	float:left;
	width:33.3%;
	height:200px;
	overflow:hidden;
}
.jdtWrap {
    width: 140px;
    height: 140px;
	margin:15px auto 0;
}
.fensug {
    width: 100%;
    height: 100%;
    border: 1px #a5edf3 solid;
    border-radius:50%;
    overflow: hidden;
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: #18347c;
}
.fensug .wavenum {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 50%;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    position: absolute;
    left: 5px;
    top: 5px;
    z-index: 5;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    /* align-items: center; */
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.fensug .wavenum b {
    color: #fff;
    font-size: 18px;
    text-align: center;
    display: block;
    position: relative;
    z-index: 2;
    font-weight: bolder;
    left: -5px;
}
.fensug .wavenum b i {
    font-size: 26px;
    font-weight: bold;
}
.fensug .wavenum b font {
    font-size: 18px;
}
.waven {
    width: 100%;
    height: 100%;
    webkit-border-radius: 25em;
    border-radius: 25em;
    background: transparent;
    overflow: hidden;
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.wave {
	width: 480px;
	height:0;
	position: absolute;
	left: 0;
	bottom: 0;
	background: url("../images/imgyuan1.png") no-repeat;
	animation: move_wave 5s linear infinite;
	-webkit-animation: move_wave 5s linear infinite;
}
.wave1 {
	width: 480px;
	height:0;
	position: absolute;
	left: -40px;
	bottom: 0;
	background: url("../images/imgyuan2.png") no-repeat;
	animation: move_wave 5s linear infinite;
	-webkit-animation: move_wave 5s linear infinite;
}
.fensug1 .wave {
	background: url("../images/imgyuan3.png") no-repeat;
}
.fensug1 .wave1 {
	background: url("../images/imgyuan4.png") no-repeat;
}
.fensug2 .wave {
	background: url("../images/imgyuan5.png") no-repeat;
}
.fensug2 .wave1 {
	background: url("../images/imgyuan6.png") no-repeat;
}
@-webkit-keyframes move_wave {
  0% {
    -webkit-transform: translateX(0)
  }
  50% {
    -webkit-transform: translateX(-25%)
  }
  100% {
    -webkit-transform: translateX(-40%)
  }
}

@keyframes move_wave {
  0% {
    transform: translateX(0)
  }
  50% {
    transform: translateX(-25%)
  }
  100% {
    transform: translateX(-40%)
  }
}
.jdtTitle {
	text-align:center;
	font-size:18px;
	color:#fff;
	margin:20px 0 0;
}
.lxJdtWrap {
	padding:10px;
	overflow:hidden;
	height:100%;
	box-sizing:border-box;
}
.lxJdtWrapScroll {
	width:calc(100% + 30px);
	overflow:hidden;
	overflow-y:auto;
	max-height:100%;
}
.lxJdtWrapContant {
	width:calc(100% - 30px);
	overflow:hidden;
}
.lxJdtWrapContant dl {
	overflow: hidden;
	width: 501px;
	margin: 7px 33px;
}
.lxJdtWrapContant dl dt {
	overflow: hidden;
	height: 30px;
	line-height: 30px;
	position: relative;
	top: 18px;
}
.lxJdtWrapContant dl dt h5 {
	float: left;
	font-size: 18px;
	font-weight: bold;
	color: #fff;
	padding-left: 38px;
	overflow: hidden;
}
.lxJdtWrapContant dl dt i {
    float: left;
    height: 15px;
    margin: 9px 10px;
    width: 1px;
    background: #fff;
}
.lxJdtWrapContant dl dt span {
    float: left;
    overflow: hidden;
    color: #fff;
    font-size: 16px;
}
.lxJdtWrapContant dl dt span b {
    font-size: 20px;
    color: #fff600;
    font-weight: bold;
    margin: 0 5px;
}
.lxJdtWrapContant dl dt em {
    float: right;
    color: #fff;
    font-size: 12px;
    padding-right: 30px;
}
.lxJdtWrapContant dl dd {
    width: 100%;
    height: 71px;
    overflow: hidden;
    padding: 0;
    margin: 0;
    background: url("../images/wzglBj.png") no-repeat left center;
}
.lxJdtWrapContant dl dd span {
    display: block;
    height: 33px;
    overflow: hidden;
    margin-top: 21px;
    padding: 0 17px;
    position: relative;
}
.lxJdtWrapContant dl dd span em {
    display: block;
    position: absolute;
    top: 0;
    left: 28px;
    right: 17px;
    z-index: 99;
}
.lxJdtWrapContant dl dd span b {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin-left: 11px;
}
.lxJdtWrapContant dl dd span b i {
    float: left;
    width: 12px;
    height: 22px;
    -webkit-transform: skew(-33deg);
    transform: skew(-33deg);
    margin-left: 4.9px;
    border-radius: 3px;
    background: rgba(64,104,158,.7);
    margin-top: 4px;
}
.lxJdtWrapContant dl dd span em i {
  float: left;
  width: 12px;
  height: 22px;
  transform: skew(-33deg);
  margin-left: 4.9px;
  border-radius: 3px;
  margin-top: 4px;
  background:#fff600;
}
.tsJdtWrap {
	height:100%;
	padding:10px;
	box-sizing:border-box;
	position:relative;
}
.tsJdtWrapScroll {
	width:calc(100% + 30px);
	max-height:100%;
	overflow:hidden;
	overflow-y:auto;
}
.tsJdtWrapContant {
	width:calc(100% - 30px);
	overflow:hidden;
}
.tsJdtWrapContant dl {
	width:406px;
	height: 105px;
	background:url("../images/hfxx1.png") no-repeat center;
	margin:70px auto;
	padding-left:80px;
	box-sizing:border-box;
	position:relative;
}
.tsJdtWrapContant dl dt {
	font-family: "HYFY";
	font-size: 23px;
	color: #34ffec;
	width:80px;
	height:80px;
	line-height:80px;
	text-align: center;
	position:absolute;
	top: 11px;
	left: 13px;
	z-index:99;
}
.tsJdtWrapContant dl dd {
	height:100%;
	width:100%;
}
.tsJdtWrapContant dl h3 {
	font-size:16px;
	font-weight:bolder;
	color:#fff;
	text-align:center;
	height:21px;
	position:relative;
	top:-10px;
}
.tsJdtContant {
	height:23px;
	padding-left:47px;
	position:relative;
}
.tsJdtContant em {
	display: block;
	width:251px;
	max-width: 251px;
	height: 16px;
	position: absolute;
	top: 4px;
	left: 55px;
	background: rgba(52,255,236,1);
	z-index: 9;
	transform: skew(19deg);
}
.tsJdtContant span {
	display:block;
	height:23px;
	line-height:23px;
	position:relative;
	z-index:99;
	color: #fff;
	font-size: 12px;
	margin-right: 15px;
	padding-left: 12px;
	text-shadow: #061b34 1px 0 0, #061b34 0 1px 0, #061b34 -1px 0 0, #061b34 0 -1px 0;
}
.tsJdtContant span b {
	float:left;
	width:50%;
	overflow:hidden;
}
.tsJdtMain {
	overflow: hidden;
	position: relative;
	height: 40px;
	line-height: 40px;
	margin-top: 14px;
}
.tsJdtMain em {
	position: absolute;
	top: 6px;
	left:35px;
	right: 35px;
	z-index: 9;
}
.tsJdtMain em i {
	float: right;
	width: 20px;
	height: 28px;
	background: rgba(52,255,236,1);
	transform: skew(-46deg);
	margin-left: 5.5px;
}
.tsJdtMain span {
	display: block;
	position: relative;
	z-index: 99;
	background: transparent;
	color: #fff;
	font-size: 16px;
	padding:0 26px 0 45px;
	text-shadow: #061b34 1px 0 0, #061b34 0 1px 0, #061b34 -1px 0 0, #061b34 0 -1px 0;
}
.zdyJdtWrap {
	width: 560px;
	height: 155px;
	overflow: hidden;
	background: url("../images/zqzw.png") no-repeat center;
	margin:43px auto;
	position: relative;
	padding-left: 34px;
	box-sizing: border-box;
}
.zdyJdtWrap ul {
	overflow: hidden;
	padding: 18px 0;
}
.zdyJdtWrap ul li {
	height: 30px;
	line-height: 30px;
	position: relative;
	padding: 0 0 0 114px;
	text-align: left;
}
.zdyJdtWrap ul li b {
    display: block;
    width: 110px;
    height: 30px;
    line-height: 30px;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
    color: #6fb6ff;
    font-size: 16px;
    text-align: right;
}
.zdyJdtWrap ul li span {
    color: #fff;
    font-size: 16px;
}
.zdyJdtWrap ul li span em {
    float: left;
    max-width: 260px;
    height: 30px;
    margin-right:14px;
}
.zdyJdtWrap ul li span em i {
	display: none;
    float: left;
    height: 8px;
    margin-top: 11px;
    position: relative;
    background-image: linear-gradient(to right,rgba(22,52,117,.4),#60f8f9);
    transition: all 3s;
}
.zdyJdtWrap ul li span em i dfn {
    display: block;
    width: 14px;
    height: 14px;
    background: #53f6ea;
    box-shadow: 0 0 14px rgb(66 181 199);
    border-radius: 50%;
    position: absolute;
    top: -3px;
    right: -11px;
    z-index: 99;
}
.zdyJdtWrap ul li.curr span {
    color: #ff6000;
}
.zdyJdtWrap ul li.curr span em i {
    background-image: linear-gradient(to right,rgba(27,43,105,.4),#ff6000);
}
.zdyJdtWrap ul li.curr span em i dfn {
    box-shadow: 0 0 14px rgb(66 181 199);
    background: #ff6000;
}
.zdyJdtTitlle {
	display: table;
	position: absolute;
	top: 0;
	left: 2px;
	width: 30px;
	height: 100%;
	text-align: center;
}
.zdyJdtTitlle b {
	display: table-cell;
	height: 100%;
	vertical-align: middle;
	text-align: center;
	color: #fff;
	font-size: 16px;
}
.echartsPublicWrap {
	height:100%;
	overflow:hidden;
}
.echartsPublicWrapScroll {
	width:calc(100% + 30px);
	max-height:100%;
	overflow:hidden;
	overflow-y:auto;
}
.echartsPublicWrapContant {
	width:calc(100% - 30px);
	overflow:hidden;
}
.echartsBannerContantWrap {
	width: 559px;
	overflow: hidden;
	margin:0 auto;
}
.echartsBannerAnimate {
	overflow: hidden;
}
.echartsBannerBtn {
	overflow:hidden;
	text-align:center;
	margin-top:20px;
}
.echartsBannerBtn span {
	display:inline-block;
	overflow:hidden;
}
.echartsBannerBtn span b {
	float: left;
	width: 30px;
	height: 10px;
	overflow: hidden;
	background: url("../images/bannerBtn.png") no-repeat center;
	margin: 0 2px;
	cursor:pointer;
}
.echartsBannerBtn span b:hover,.echartsBannerBtn span b.add {
	background: url("../images/bannerBtnH.png") no-repeat center;
}
.echartsBannerAnimate dl {
	float: left;
	width: 559px;
	height: 129px;
	overflow: hidden;
	background: url("../images/bannerMain.png") no-repeat center;
	padding-top: 38px;
	position: relative;
	box-sizing: border-box;
	margin-top:50px;
}
.echartsBannerAnimate dl dt {
	overflow: hidden;
	padding: 0 10px;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 99;
}
.echartsBannerAnimate dl dt span {
    float: left;
    height: 38px;
    line-height: 38px;
    width:26%;
    overflow: hidden;
    color: #dfdfdf;
    font-size: 12px;
	text-align:center;
}
.echartsBannerAnimate dl dt span:first-child {
	width:48%;
}
.echartsBannerAnimate dl dt span b {
    margin-left: 6px;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
}
.echartsBannerAnimate dl dd {
	height: 100%;
	overflow: hidden;
}
.echartsBannerContantScroll {
	width:calc(100% + 30px);
	max-height: 100%;
	overflow: hidden;
	overflow-y: auto;
}
.echartsBannerContants {
	width:calc(100% - 30px);
	overflow: hidden;
	color: #fff;
	font-size: 14px;
	text-indent: 2em;
	line-height: 28px;
	text-align: left;
	padding: 0 10px;
	box-sizing: border-box;
}