JavaScript實(shí)現(xiàn)公告欄上下滾動(dòng)效果
更新時(shí)間：2020年03月13日 07:29:28 作者：小黑2635121987
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)公告欄上下滾動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js公告欄上下滾動(dòng)效果的具體實(shí)現(xiàn)代碼，供大家參考，具體內(nèi)容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>公告欄上下滾動(dòng)</title>
</head>
<style type="text/css">
body {
background: grey;
}
ul,li{list-style: none;padding: 0;margin: 0;}
.Roll {
padding: 0;
text-align: left;
text-indent: 10px;
cursor: pointer;
opacity: 1;
height: 6rem;
line-height: 3rem;
font-size: 17px;
background-color: #fff;
color: #fe172d;
}
.ul li {
background-color: #A6E1EC;
border-radius: 20px;
height: 2rem;
margin: 50px auto;
opacity: 0;
line-height: 2rem;
}
</style>
<body>
<div class="Roll" style="overflow: hidden">
<ul class="ul">
<li>11111剛剛購(gòu)買了一單</li>
<li>22222剛剛購(gòu)買了一單</li>
<li>33333剛剛購(gòu)買了一單</li>
<li>44444剛剛購(gòu)買了一單</li>
<li>55555剛剛購(gòu)買了一單</li>
<li>66666剛剛購(gòu)買了一單</li>
</ul>
</div>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
statr = () => { //創(chuàng)造一個(gè)循環(huán)方法函數(shù)
let first = $('.ul li:first'), //獲取列表第一個(gè)li
firstLi = first.clone(); //復(fù)制第一個(gè)li
$('.ul li').eq(0).animate({ //列表第一個(gè)添加動(dòng)畫(huà)，
marginTop: '-=15px',
opacity: '1'
}, 2000)
setTimeout(function() {
$('.ul li').eq(0).animate({//列表第二個(gè)添加動(dòng)畫(huà)，
marginTop: '-=15px',
opacity: '0'
}, 2000);
setTimeout(function() {//動(dòng)畫(huà)結(jié)束后刪除第一個(gè)li
first.remove();
}, 2000)
$('.ul').append(firstLi)//li復(fù)制到最后面開(kāi)始新的一輪循環(huán)
},4000)
}
setInterval('statr()', 7000) //7秒循環(huán)一次
</script>
</html>
更多關(guān)于滾動(dòng)效果的精彩文章點(diǎn)擊下方專題：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript canvas實(shí)現(xiàn)俄羅斯方塊游戲
這篇文章主要為大家詳細(xì)介紹了JavaScript canvas實(shí)現(xiàn)俄羅斯方塊游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-07-07
JavaScript開(kāi)發(fā)者必備的10個(gè)Sublime Text插件
Sublime Text幾乎是任何開(kāi)發(fā)者在其工具箱的必備應(yīng)用程序,這篇文章主要介紹了JavaScript開(kāi)發(fā)者必備的10個(gè)Sublime Text插件，感興趣的小伙伴們可以參考一下2016-02-02
JS常用正則表達(dá)式總結(jié)。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-11-11
JavaScript ES6中const、let與var的對(duì)比詳解
這篇文章主要給大家介紹了在JavaScript中const、let與var對(duì)比的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編來(lái)一起看看吧。2017-06-06
javascript html 靜態(tài)頁(yè)面?zhèn)鲄?shù)
靜態(tài)頁(yè)面中用js獲取頁(yè)面參數(shù)的一些屬性方法，具體的獲取參數(shù)，可以搜索本站以前的一些文章。2009-04-04
JS簡(jiǎn)單設(shè)置下拉選擇框默認(rèn)值的方法
這篇文章主要介紹了JS簡(jiǎn)單設(shè)置下拉選擇框默認(rèn)值的方法,涉及javascript針對(duì)頁(yè)面元素的遍歷、查找及設(shè)置技巧,需要的朋友可以參考下2016-08-08
JavaScript閉包函數(shù)訪問(wèn)外部變量的方法
這篇文章主要介紹了JavaScript閉包函數(shù)訪問(wèn)外部變量的方法,本文使用匿名函數(shù)來(lái)實(shí)現(xiàn)在閉包中訪問(wèn)外部變量,需要的朋友可以參考下2014-08-08
這篇文章主要介紹了微信小程序 slot踩坑的解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要為大家詳細(xì)介紹了微信小程序表單驗(yàn)證錯(cuò)誤提示效果，點(diǎn)擊確認(rèn)發(fā)布不能為空錯(cuò)誤提示，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要介紹了解決超出JS的安全整數(shù)的限制范圍問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08