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)文章
uniapp的webview實現(xiàn)左滑返回上一個頁面操作方法
uniapp默認左滑是關(guān)閉整個webview,而不是關(guān)閉當(dāng)前頁,本文給大家介紹uniapp的webview實現(xiàn)左滑返回上一個頁面操作方法,感興趣的朋友一起看看吧2023-12-12
JS的數(shù)字類型一旦數(shù)字超過限值,JS將會丟失精度,導(dǎo)致前后端的值出現(xiàn)不一致,這篇文章主要給大家介紹了關(guān)于JS數(shù)字精度丟失的原因分析及解決方法,需要的朋友可以參考下2022-04-04
javascript實現(xiàn)數(shù)組扁平化六種技巧總結(jié)
這篇文章主要為大家詳細介紹了六種javascript中實現(xiàn)數(shù)組扁平化的技巧,文中的示例代碼講解詳細,具有一定的借鑒價值,感興趣的小伙伴可以了解下2023-12-12
javascript:window.open彈出窗口的位置問題
這篇文章主要介紹了javascript:window.open彈出窗口的位置問題,需要的朋友可以參考下2014-03-03
javascript 冒泡排序 正序和倒序?qū)崿F(xiàn)代碼
javascript 冒泡排序 正序和倒序?qū)崿F(xiàn)代碼，需要的朋友可以參考下。2010-12-12
javascript操作table的特性，大家可以看下，發(fā)揮下，實現(xiàn)更多的功能。2009-09-09
這篇文章主要介紹了JavaScript中的對象的extensible屬性介紹,JavaScript中，對象的extensible屬性用于表示是否允許在對象中動態(tài)添加新的property,需要的朋友可以參考下2014-12-12
JavaScript獲取當(dāng)前網(wǎng)頁標(biāo)題（title）的方法
這篇文章主要介紹了JavaScript獲取當(dāng)前網(wǎng)頁標(biāo)題（title）的方法,涉及javascript中document.title方法的使用,需要的朋友可以參考下2015-04-04
Clipboard?API?是一組用于在瀏覽器中操作剪貼板的?JavaScript?API,它允許開發(fā)者在網(wǎng)頁上讀取和寫入剪貼板內(nèi)容,實現(xiàn)復(fù)制、剪切和粘貼等功能,這篇文章主要介紹了JS實現(xiàn)復(fù)制粘貼文字及圖片功能,需要的朋友可以參考下2024-07-07
JS獲得鼠標(biāo)位置（兼容多瀏覽器ie,firefox）腳本之家修正版
這段代碼經(jīng)過測試，支持ie和ff是個不錯的代碼，并修正了錯誤，希望大家先運行測試下2008-11-11