向上滚动效果

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

本文将带你实现向上滚动动画效果，

一、第一步html页面代码

 <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代码

.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;
}

第三步:javscript代码

<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>