javascript 文字無縫向上滾動

2021-07-06 10:52:43 字數 1463 閱讀 5004

靜態**:

style="height:30px;overflow:hidden;">

id='marquee'>

第1段p>

第2段p>

第3段p>

第4段p>

第5段p>

div>

div>

解釋:首先最外層是乙個高度只有30px的層,這樣大概只能顯示一行文字。然後裡面有乙個 #marquee的層,這個層包含了很多段文字,高度實際超出30px很多,我們要實現的就是將#marquee不停的往上滾動,這樣多行內容將依次在30px中顯示。

思路:通過js的定時器,每隔50毫秒將#marquee層的css屬性margin-top -1px,並且在最後一段文字移動過去後將margin-top歸零。 

初步**:

(function

() marquee.style.margintop = "-"+offset+"px";

offset += 1;

},50);

})();

這樣初步的效果出來了,但是還有乙個問題: 

當最後一行文字移動結束時,會有一段空白,然後突然復位,無法無縫滾動,解決也很容易,我們一開始就將第一段文字複製到最後一行後面,調整

標籤的高度為30px。 

附加css:

#marquee

pstyle>

js**:

(function

() marquee.style.margintop = "-"+offset+"px";

offset += 1;

},50);

})();

完整的**:

todo supply a titletitle>

charset="utf-8">

name="viewport"

content="width=device-width">

head>

#marquee

p

style>

style="height:30px;overflow:hidden;">

id='marquee'>

第1段p>

第2段p>

第3段p>

第4段p>

第5段p>

div>

div>

(function

() marquee.style.margintop = "-"+offset+"px"

; offset += 1

; },50)

; })();

script>

body>

html>

js文字無縫滾動

1 overflow hidden width 128px height 300px 23 90 cellspacing 3 cellpadding 0 border 0 align center class ykxm 孫君洲 1人 2013 09 06到 class xdd ff0000 新訂單 ...

文字無縫上下滾動

看了好幾個網上的例子,最終得到了想要的效果。啥也不說了,記錄有效的 直接放 html 188 1865剛剛在貸款超市成功借款5000元 155 1899剛剛在貸款超市成功借款8000元 156 8899剛剛在貸款超市成功借款8000元 135 3999剛剛在貸款超市成功借款8000元 css suc...

JQ 文字無縫滾動之逐條滾動

jq 本列子是從下向上滾動的,如果時其他方向的修改marginbttom就可以了 function var this this this.timer null this.lineh this.find li first height this.line opt.line?parseint opt.l...