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