js實現(xiàn)文字向上輪播功能
更新時間：2017年01月13日 10:42:38 作者：帶阿貍?cè)ヂ眯?
本文主要分享了javascript實現(xiàn)向上文字輪播功能的示例代碼。具有一定的參考價值，下面跟著小編一起來看下吧
話不多說，請看實現(xiàn)代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
.lunbo{
position: relative;
width: 600px;
height: 50px;
border:1px solid red;
overflow: hidden;
}
ul{
position:absolute;
left: 0;
top:0;
width: 600px;
height: auto;
}
ul li{
width: 600px;
height: 50px;
line-height: 50px;
font-size:20px;
color:#333;
text-align: center
}
</style>
</head>
<body>
<div class="lunbo">
<ul>
<li>人生在世須盡歡 莫使金樽空對月</li>
<li>我寄愁心與明月，隨風(fēng)直到夜郎西</li>
<li>不是花中偏愛菊，此花開盡更無花</li>
<li>辛苦遭逢起一經(jīng)，干戈寥落四周星</li>
<li>山河破碎風(fēng)飄絮，身世浮沉雨打萍。</li>
<li>惶恐灘頭說惶恐，零丁洋里嘆零丁。</li>
<li>人生自古誰無死？留取丹心照汗青。</li>
</ul>
</div>
<script src="http://cdn.bootcss.com/jquery/2.2.2/jquery.js"></script>
<script>
function lunbo(id,height){
var ul=$(id);
var liFirst=ul.find('li:first');
$(id).animate({top:height}).animate({"top":0},0,function(){
var clone=liFirst.clone();
$(id).append(clone);
liFirst.remove();
})
}
setInterval("lunbo('ul','-50px')",3000)
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關(guān)文章
Bootstrap下拉菜單Dropdowns的實現(xiàn)代碼
這篇文章主要為大家詳細介紹了Bootstrap下拉菜單Dropdowns的實現(xiàn)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
JavaScript如何將base64圖片轉(zhuǎn)化為URL格式
這篇文章主要給大家介紹了關(guān)于JavaScript如何將base64圖片轉(zhuǎn)化為URL格式的相關(guān)資料,Base64是一種編碼方式,而不是真正的加密方式,即使算Base64也僅用作一個簡單的加密來保護某些數(shù)據(jù),而真正的加密通常都比較繁瑣,需要的朋友可以參考下2023-07-07
這篇文章主要為大家詳細介紹了js實現(xiàn)帶進度條提示的多視頻上傳功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章介紹了js圖片隨機不定向浮動的實現(xiàn)代碼，有需要的朋友可以參考一下2013-07-07
這篇文章主要介紹了ES6 Promise對象概念與用法,簡單分析了Promise對象的基本狀態(tài)與三種重要方法,并結(jié)合實例形式給出相關(guān)使用技巧,需要的朋友可以參考下2017-04-04
本文主要分享了canvas紅包照片的實例代碼，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要介紹了JavaScript判斷前綴、后綴是否是空格的方法,涉及javascript操作字符串的正則替換、判斷與屬性操作技巧,需要的朋友可以參考下2015-04-04
iframe實現(xiàn)與父頁面跨域隔離的JavaScript?代碼沙箱
這篇文章主要介紹了使用iframe實現(xiàn)與父頁面跨域隔離的JavaScript代碼沙箱，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
這篇文章主要介紹了微信小程序返回上一級頁面的實現(xiàn)代碼,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-06-06
大型網(wǎng)站往往很矛盾，想用戶在首頁看到更多東西，又不想浪費太多服務(wù)器流量。比如一個有3屏的首頁?？赡?0%的用戶進首頁的目的是點擊首頁的連接，到子頁面。2010-05-05