快捷導(dǎo)航

js實(shí)現(xiàn)文字向上輪播功能

更新時(shí)間：2017年01月13日 10:42:38 作者：帶阿貍?cè)ヂ眯?

本文主要分享了javascript實(shí)現(xiàn)向上文字輪播功能的示例代碼。具有一定的參考價(jià)值，下面跟著小編一起來看下吧

話不多說，請看實(shí)現(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í)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

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