jQuery實現跑馬燈

2021-09-05 10:59:12 字數 2009 閱讀 6500

前段時間做專案乙個需求,輪播方式實現不了,自己寫了乙個跑馬燈實現效果。

html:

class

="container"

>

class

="scroll_div"

>

class

="scroll_begin"

>

>

>

href

="#"

>

文字1a

>

li>

>

href

="#"

>

文字2a

>

li>

>

href

="#"

>

文字3a

>

li>

>

href

="#"

>

文字4a

>

li>

>

href

="#"

>

文字5a

>

li>

>

href

="#"

>

文字6a

>

li>

>

href

="#"

>

文字7a

>

li>

>

href

="#"

>

文字8a

>

li>

>

href

="#"

>

文字9a

>

li>

>

href

="#"

>

文字10a

>

li>

>

href

="#"

>

文字11a

>

li>

ul>

div>

class

="scroll_end"

>

div>

div>

div>

js:

window.

onload

=function()

// 動畫效果

function

getsroll()

var mymar =

setinterval

(marquee, speed)

scroll_div.

onmouseover

=function()

scroll_div.

onmouseout

=function()

};

css:

.container

.container.scroll_div

.container.scroll_div a

.container.scroll_begin,

.container.scroll_end,

.container.scroll_begin ul,

.container.scroll_end ul,

.container.scroll_begin ul li,

.container.scroll_end ul li

.container.scroll_begin ul li,

.container.scroll_end ul li

.container.scroll_begin ul li a,

.container.scroll_end ul li a

.container.scroll_begin ul li a:hover,

.container.scroll_end ul li a:hover

簡單實現跑馬燈

1.可以自己實現自定義view public class marqueetestview extends textview implements runnable 畫筆工具 override protected void ondraw canvas canvas override public vo...

跑馬燈效果

cgrect frame labelshow.frame frame.origin.x 180 labelshow.frame frame uiview beginanimations testanimation context null uiview setanimationduration 8....

跑馬燈效果

一句話概括,平移再畫一次。textview 預設就支援跑馬燈效果,但需要設定一些東西,滿足一些條件。但我想知道它的原理。看這效果,就是平滑移動 textview 的內容,這不就是 mscrollx 幹的嗎,結合 valueanimator 很容易就實現了。難點在於,把文字的頭部重新從右邊開始畫出來。...