在做html頁(yè)面時(shí)有鹿，為了提升網(wǎng)頁(yè)的用戶(hù)體驗(yàn)摔握，我們需要在網(wǎng)頁(yè)中加入一些特效糕韧，比如多行區(qū)域文字上下滾動(dòng)就是經(jīng)常用到的特效。代碼如下圖：
樣式
<style>
* {
margin: 0;
padding: 0;
}
.container {
width: 800px;
height: 300px;
border: 1px solid;
overflow: hidden;
position: relative;
}
.container ul {
list-style: none;
position: absolute;
width: 100%;
top: 0;
text-align: center;
}
.container ul >li{
width: 100%;
height: 50px;
border: 1px solid;
line-height: 50px;
}
.container >.nav {
width: 100%;
height: 50px;
line-height: 50px;
position: absolute;
background-color: red;
z-index: 1;
text-align: center;
}
</style>
</style>
結(jié)構(gòu)
<div class="container" id ="container">
<div class="nav" id ="nav">滾動(dòng)條</div>
<ul id="ul">
<li>Leo 中了一個(gè)手機(jī)</li>
<li>張三 中了一個(gè)手機(jī)</li>
<li>老王 中了一臺(tái)洗衣機(jī)</li>
<li>Leo 中了一個(gè)手機(jī)</li>
<li>妹妹 中了一帶洗衣液</li>
<li>阿三 中了一個(gè)手機(jī)</li>
<li>阿四 中了一臺(tái)電腦</li>
<li>阿五 中了一個(gè)手機(jī)</li>
<li>阿六 中了一部手機(jī)</li>
<li>阿巴 中了一個(gè)手機(jī)</li>
<li>阿十 中了一個(gè)手機(jī)</li>
</ul>
</div>
js
<script>
var container = document.getElementById('container');
var ul = document.getElementById('ul');
var timer = null;
function lunPo() {
if(!timer) {
var count = 0;
timer = setInterval(function() {
count +=1;
ul.style.top = count + 'px';
if(count >= 50) {
count = 0;
var flag;
flag = ul.children[0].cloneNode(true);
ul.removeChild(ul.children[0]);
ul.appendChild(flag)
}
},10)
}
}
lunPo();
</script>
Image 14.png
這樣一個(gè)簡(jiǎn)單的文字向上輪播就完成啦斑鼻！
希望我的理解可以給你們提供一些幫助蒋纬，學(xué)識(shí)有限，如果有地方出現(xiàn)錯(cuò)誤或者有更好的方法去實(shí)現(xiàn)坚弱，歡迎私信颠锉！
