js實現(xiàn)文字無縫向上滾動
更新時間：2017年02月16日 11:46:39 作者：大大大大糖糖
本文主要分享了js實現(xiàn)文字無縫向上滾動的示例代碼，具有很好的參考價值，下面跟著小編一起來看下吧
靜態(tài)效果如下：（動態(tài)效果復(fù)制粘貼下面代碼可見）
代碼如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<style type="text/css">
*{
padding: 0;
margin:0;
}
ul,li{
list-style: none
}
.scroll {
height:90px;
width:100%;
max-width:640px;
background-color:#000;
overflow:hidden;
color: #fff;
}
.scroll ul {
width:100%;
position:absolute;
left:0;
top:0;
}
.scroll span {
font-size:20px;
height:30px;
/*color:#D83E21;
*/
}
.scroll li {
height:30px;
line-height:30px;
}
</style>
</head>
<body>
<div id="scroll" class="scroll clearfix">
<ul>
<li>444444444444444444444444</li>
<li>11111111111111111111111111</li>
<li>11111111111111111111111111</li>
<li>11111111111111111111111111</li>
<li>11111111111111111111111111</li>
<li>33333333333333333333333333</li>
<li>11111111111111111111111111</li>
<li>11111111111111111111111111</li>
<li>11111111111111111111111111</li>
<li>11111111111111111111111111</li>
<li>11111111111111111111111111</li>
<li>2222222222222</li>
</ul>
</div>
</body>
</html>
<script type="text/javascript">
//滾動
var scrollIndex=0;
var Timer=null;
function scroll_f(){
clearInterval(Timer);
var ul=$("#scroll ul");
var li=ul.children("li");
var h=li.height();
var index=0;
ul.css("height",h*li.length*2);
ul.html(ul.html()+ul.html());
function run()
{
if(scrollIndex>=li.length){
ul.css({top:0});
scrollIndex=1;
ul.animate({top:-scrollIndex*h},200);
}
else{
scrollIndex++;
ul.animate({top:-scrollIndex*h},200);
}
}
Timer=setInterval(run,1500);
}
$(function(){
scroll_f();
})
</script>
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細介紹了如何使用JavaScript實現(xiàn)隨機點名效果,文中的示例代碼簡潔易懂,具有一定的借鑒價值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-11-11
JS+html5 canvas實現(xiàn)的簡單繪制折線圖效果示例
這篇文章主要介紹了JS+html5 canvas實現(xiàn)的簡單繪制折線圖效果,結(jié)合實例形式分析了js結(jié)合HTML5 canvas技術(shù)實現(xiàn)圖形繪制的數(shù)值運算與數(shù)組遍歷等操作技巧,需要的朋友可以參考下2017-03-03
JavaScript如何將base64圖片轉(zhuǎn)化為URL格式
這篇文章主要給大家介紹了關(guān)于JavaScript如何將base64圖片轉(zhuǎn)化為URL格式的相關(guān)資料,Base64是一種編碼方式,而不是真正的加密方式,即使算Base64也僅用作一個簡單的加密來保護某些數(shù)據(jù),而真正的加密通常都比較繁瑣,需要的朋友可以參考下2023-07-07
關(guān)于JS彈出層的顯示與隱藏，在網(wǎng)上可以搜到很多的類似教程，本文實現(xiàn)了一下，喜歡的朋友不要錯過2013-12-12
用js實現(xiàn)的抽象CSS圓角效果!!...2007-05-05
微信小程序?qū)崿F(xiàn)點擊按鈕修改view標簽背景顏色功能示例【附demo源碼下載】
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)點擊按鈕修改view標簽背景顏色功能,涉及微信小程序事件響應(yīng)及數(shù)值運算實現(xiàn)動態(tài)設(shè)置view背景色樣式的相關(guān)操作技巧,需要的朋友可以參考下2017-12-12
本文將使用canvas實現(xiàn)粒子時鐘效果，具有一定的參考價值，下面跟著小編一起來看下吧2017-02-02
使用pdf-lib.js實現(xiàn)拼接兩個pdf文件并添加水印
這篇文章主要為大家詳細介紹了如何使用pdf-lib.js實現(xiàn)拼接兩個pdf文件并添加水印,文中的示例代碼講解詳細,感興趣的小伙伴可以了解下2024-11-11
按Ctrl+Enter發(fā)送，思路是監(jiān)聽textarea的onkeydown事件，當(dāng)ctrl鍵被按下，并且，keycode為13（回車），時，調(diào)用發(fā)送表單的函數(shù)2014-09-09
JavaScript 中的相等操作符詳解，包括 [] == []、[] == ![]、{} == !{}幾個操作符,需要的朋友可以參考下2019-12-12