向上滚动效果

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

一、第一步html页面代码

[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>
[/html]

第二步： css代码

[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;
}
[/css]

第三步:javscript代码

[javascript]
<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>
[/javascript]

转载请注明来源：向上滚动效果

本文链接地址：https://ai.zhousir.top/?p=2416