縱向的走馬燈,有停頓效果

2021-09-25 11:26:25 字數 1537 閱讀 4419

**備忘錄

實現了列表資料一條一條向上移動,每移動一條資料停一下

一開始想用屬性的,但是發現,這樣一來初始化的時候會空出乙個可見div的高度,第一條資料才姍姍來遲,而且沒有實現每移動一條資料停頓一下的效果。現在使用anim來控制,scroll()方法第一步開啟animate開關,並且每隔一秒將陣列的第乙個元素新增到陣列的最後一位,再刪除陣列的第乙個元素,最後再關閉animate開關,在賦值陣列時用定時器每2秒呼叫一次scroll()方法。

另加了滑鼠移入暫停,移出繼續移動

="query_showcon_main_table_main" @mouseover=

"mouseover" @mouseout=

"mouseout"

>

="marquee"

:class

="" v-if=

"!auto"

>

="marqueeitem" v-

for=

"(item,index) in tablelist"

:key=

"index"

>

="marqueeitem_info"

:title=

"'第'+item.rank+'名'"

>

}<

/div>

="marqueeitem_info"

:title=

"item.area_name"

>

}<

/div>

="marqueeitem_info"

:title=

"item.zhaopin_name"

>

}<

/div>

="marqueeitem_info"

:title=

"item.zhaopin_code"

>

}<

/div>

="marqueeitem_info"

:title=

"item.score+'分'"

>

}<

/div>

="marqueeitem_info"

:title=

"item.score_devide+'分'"

>

}<

/div>

<

/div>

<

/div>

<

/div>

//滑鼠移入

mouseover()

,//滑鼠移出

mouseout()

},scroll()

,1000)}

,//獲取最新50條資料

getnewlist()

}})}

,

//anim來控制向上移動

.anim

&_main }}

}

文字走馬燈效果

文字走馬燈效果 最近碰到的問題,由於label的size固定,而label.caption太長,無法完整顯示出來,要求實現文字走馬燈效果,依次顯示出完整的內容。文字走馬燈效果有幾種方法 1 通過移動label.left值實現,但label會移動。不符合要求 2 不斷複製lable.caption來實...

css3 走馬燈效果

純css3實現了乙個正六邊形的走馬燈效果,記錄一下css3動畫的學習情況,效果如下 主要用到的css3技術有 keyframes perspective perspective origin transform translate rotate animation transform origin,...

文字框的走馬燈效果

介面設計 拖動timer控制項進來 設定拖進來的timer控制項的tick事件 具體 如下 1 using system 2using system.collections.generic 3using system.componentmodel 4using system.data 5using ...