js實(shí)現(xiàn)文字無(wú)縫向上滾動(dòng)
更新時(shí)間：2017年02月16日 11:46:39 作者：大大大大糖糖
本文主要分享了js實(shí)現(xiàn)文字無(wú)縫向上滾動(dòng)的示例代碼，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧
靜態(tài)效果如下：（動(dòng)態(tài)效果復(fù)制粘貼下面代碼可見(jiàn)）
代碼如下：
<!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">
//滾動(dòng)
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>
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了小程序轉(zhuǎn)發(fā)探索示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02
js中的eventType事件想必大家都不陌生吧，下面為大家詳細(xì)介紹下一般的事情及瀏覽器支持性，感興趣的朋友可以參考下2013-11-11
這篇文章主要為大家詳細(xì)介紹了原生JS仿QQ閱讀點(diǎn)擊展開(kāi)、收起效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
javascript 動(dòng)態(tài)添加事件代碼
往往我們需要在 JS 中動(dòng)態(tài)添加事件，這就涉及到瀏覽器兼容性問(wèn)題了，以下談及的幾種方法，我們也常?；旌鲜褂谩?/div> 2008-11-11
JavaScript深入淺出__proto__和prototype
這篇文章主要介紹了JavaScript深入淺出__proto__和prototype，文章基于JavaScript的相關(guān)資料展開(kāi)詳細(xì)的內(nèi)容介紹。具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-05-05
這篇文章主要介紹了javascript如何實(shí)現(xiàn)暫停功能,，Javascript本身沒(méi)有暫停功能,同時(shí)vbscript也不能使用doEvents，故編寫(xiě)此函數(shù)實(shí)現(xiàn)此功能， 需要的朋友可以參考下2015-11-11
js實(shí)現(xiàn)點(diǎn)擊按鈕隨機(jī)生成背景顏色
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)點(diǎn)擊按鈕隨機(jī)生成背景顏色，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
Javascript學(xué)習(xí)之談?wù)凧S的全局變量跟局部變量(推薦)
這篇文章主要介紹了Javascript學(xué)習(xí)之談?wù)凧S的全局變量跟局部變量雖然腳本之家小編以前發(fā)過(guò)，但還是這篇文章整理的比較好，需要的朋友可以參考一下2016-08-08
基于bootstrap的文件上傳控件bootstrap fileinput
這篇文章主要為大家詳細(xì)介紹了基于bootstrap的文件上傳控件bootstrap fileinput，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了淺談webpack對(duì)樣式的處理，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01最新評(píng)論