向上滚动效果

周sir | 2020年2月11日 | html/css/js, web前端技术 | 0 条评论 | 1030

就业名单这类展示页经常要在固定高度里循环滚动，既要看起来“一直在动”，又要鼠标悬停时能停下来细看。下面用一份完整的 HTML + CSS + jQuery 实现向上滚动，效果如图：

思路是把同一份 ul 再复制一份接到后面，滚动到第一份底部时把 scrollTop 拉回去，视觉上就是无缝循环。

一、HTML 结构

外层 .job 控制总宽，.job-title 是表头，#ul-table 是可视窗口。#uls 放真实数据，#uls2 用来承接克隆内容，滚动时两段列表首尾相接。

 <div class="job" style="width: 1200px; margin: 0 auto;">

            <div class="panel panel-info">

                <div class="panel-heading job-title">

                    <span>姓名</span>

                    <span>学历</span>

                    <span>专业</span>

                    <span>就业公司</span>

                    <span>入职岗位</span>

                    <span>年薪</span>

                    <span>就业城市</span>

                </div>

                <div class="panel-body job-information">

                    <div class="col-md-12 ul-table" id="ul-table">

                        <ul id="uls">

                            <li><span>张*强</span><span>大专</span><span>计算机应用</span><span>深圳安**杰科技有限公司</span><span>java工程师</span><span>6.0W</span><span>成都</span>

                            <li><span>李*铃</span><span>大专</span><span>农学与生物科技</span><span>成都格**兹科技有限公司</span><span>web前端工程师</span><span>6.5W</span><span>成都</span>

                            <li><span>五*浩</span><span>大专</span><span>计算机应用</span><span>成都千**信息技术有限公司</span><span>Java工程师</span><span>7.2W</span><span>成都</span>

                            <li><span>罗*翔</span><span>大专</span><span>机械制造</span><span>成都格**兹科技有限公司</span><span>Java工程师</span><span>7.8W</span><span>成都</span>

                            <li><span>李*鹏</span><span>本科</span><span>土木工程</span><span>成都格**兹科技有限公司</span><span>Java工程师</span><span>7.8W</span><span>成都</span>

                            <li><span>张*杰</span><span>专科</span><span>煤田地质</span><span>中**创达软件股份有限公司</span><span>java工程师</span><span>7.0W</span><span>成都</span>

                            <li><span>许*文</span><span>本科</span><span>机械设计制造及其自动化</span><span>北京银**服科技有限公司</span><span>Java工程师</span><span>7.8W</span><span>西安</span>

                            <li><span>李*廷</span><span>专科</span><span>工商管理</span><span>西安科**智能技术有限公司</span><span>Java工程师</span><span>5.9W</span><span>西安</span>

                            <li><span>钟*燕</span><span>本科</span><span>电气工程及其自动化</span><span>中软**服务有限公司</span><span>Java工程师</span><span>12W</span><span>成都</span>

                            <li><span>李*治</span><span>本科</span><span>软件工程</span><span>四川西**信息技术有限公司</span><span>Java工程师</span><span>7.8W</span><span>成都</span>

                            <li><span>王*龙</span><span>本科</span><span>土木工程</span><span>四川世纪**系统有限公司</span><span>Java工程师</span><span>11.1W</span><span>成都</span>

                            <li><span>杨*崭</span><span>大专</span><span>电子信息工程</span><span>紫**云数科技有限公司</span><span>Java工程师</span><span>8.5W</span><span>成都</span>

                            <li><span>何*春</span><span>本科</span><span>电气工程及其自动化</span><span>四川世纪**系统有限公司</span><span>Java工程师</span><span>8.5W</span><span>成都</span>

                            <li><span>张*豪</span><span>本科</span><span>电子信息工程</span><span>成都数**软件科技有限公司</span><span>Java工程师</span><span>5.2W</span><span>成都</span>

                            <li><span>刘*刚</span><span>大专</span><span>土木工程</span><span>深圳市拓**软件有限公司</span><span>web前端工程师</span><span>14.3W</span><span>上海</span>

                            <li><span>刘*斌</span><span>本科</span><span>建筑学</span><span>上海中**信息科技有限公司</span><span>Java工程师</span><span>16.9W</span><span>上海</span>

                            <li><span>郝*建</span><span>本科</span><span>生物工程</span><span>东**富信息股份有限公司</span><span>Java工程师</span><span>16.9W</span><span>上海</span>

                        </ul>

                        <ul id="uls2"></ul>

                    </div>

                </div>



            </div>

        </div>

二、CSS：固定视口与列宽

.job-information .ul-table 高度 350px，平时 overflow-y: hidden，避免出现滚动条抢视觉；悬停时脚本会临时改成 scroll。各列用百分比宽度对齐表头，公司名一列更宽，年薪加粗，偶数行浅底。

.box {

    border-radius: 8px;

    background-color: #fff;

    border: 1px solid rgba(0, 0, 0, .14);

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);

    padding: 15px 20px;

}



/* 就业信息 */



.job span.glyphicon {

    color: #3f9fcf;

}



.job .panel span {

    display: inline-block;

    width: 10%;

    padding: 9px 0px;

    overflow: hidden;

    text-align: center;

}



.job .panel-body span {

    padding: 0;

    height: 38px;

    line-height: 38px;

}



.job-information .ul-table {

    height: 350px;

    overflow: auto;

    overflow-y: hidden;

}



.job-information ul li {

    display: block;

    height: 38px;

}



.job-title span {

    background: none;

    padding: 0 !important;

}



.job-title {

    color: #31708f;

    background-color: #d9edf7;

    border-color: #bce8f1;

}



.job-title span:nth-child(3),

.job ul li span:nth-child(3) {

    width: 15%;

}



.job-title span:nth-child(4) {

    width: 30%;

}



.job ul {

    width: 100%;

    padding: 0;

    margin: 0;

}



.job ul li {

    width: 100%;

    list-style: none;

}



.job ul li span:nth-child(6) {

    font-weight: 700;

    width: 11%;

}



.job ul li span:nth-child(4) {

    width: 32%;

}



.job .ul-table li:nth-child(2n) {

    background: #eff8fc;

}

三、JavaScript：无缝向上滚

score_msg(tableID, ulsID, uls2ID) 先把第一份列表 HTML 拷到第二份，再按 10ms 递增 scrollTop。当滚动距离达到第一份高度时，用 i = b - a 回到等效位置，形成循环。鼠标进入清定时器并显示滚动条，离开后从当前 scrollTop 继续。

<script src="../js/jquery.js"></script>



	<script>

        $(function () {

			//就业信息向上滚动

			score_msg("ul-table", "uls", "uls2");

		})

		//就业信息向上滚动

		function score_msg(tableID, ulsID, uls2ID) {

			$("#" + uls2ID).html($("#" + ulsID).html());

			var i = 0;

			var speed = 10;

			var timer = setInterval(run, speed);



			function run() {

				var a = $("#" + ulsID).height();

				var b = $("#" + tableID).scrollTop();

				if (a <= b) {

					i = b - a;

				}

				$("#" + tableID).scrollTop(i);

				i++;

			}

			$("#" + tableID).mouseover(function () {

				clearInterval(timer);

				$("#" + tableID).css({

					overflowY: "scroll"

				});

				i = $("#" + tableID).scrollTop();

			});

			$("#" + tableID).mouseout(function () {

				$("#" + tableID).css({

					overflowY: "hidden"

				});

				timer = setInterval(run, speed)

			});



		}

	</script>

环节	关键点	作用
结构	`#uls` + `#uls2`	两份相同列表首尾相接
视口	height: 350px + overflow hidden	只露出若干行
动画	setInterval + scrollTop++	匀速向上
复位	a <= b 时 i = b - a	无缝循环
交互	mouseover / mouseout	悬停暂停并可手滑