JQ實現文字跑馬燈,文字橫向滾動

2021-10-01 09:14:21 字數 1411 閱讀 7755

因需求要做乙個,橫向的文字從右到左的跑馬燈 ,滑鼠移動上去暫停,參考其他大大的跑馬燈不太適用所以,自己再次封裝了乙個跑馬燈,分享給大家也方便自己下次直接使用,我自己用的jq版本為3.3.1(jquery-3.3.1.min.js)

先上效果圖

**部分為

style

="padding

: 0 1rem;

">

"container_small_tip"

>

"content_small_tip"

>

div>

div>

div>

#container_small_tip

#content_small_tip

呼叫方式為

var content =

"自2023年8月8日起原基礎強化班和原全面提公升班合併公升級為全面提分班,原全面提公升班和原全面提公升班所剩課時在公升級後的全面提分班自動順延";$

("#content_small_tip").

html

(content)

;roll(2

,"#container_small_tip"

,"#content_small_tip"

);跑馬燈函式封裝為

//跑馬燈外掛程式start

function

roll

(speed=

1,fatherselect,select));

var this =

this

;var time =

setinterval

(function()

,20);

//setinterval會改變this指向,即使加了this=this,也要用匿名函式封裝

$container.

bind

("mouseover"

,function()

);$container.

bind

("mouseout"

,function()

,20);

});// settimeout(function () , 30000); //毫秒單位,顯示30s後消失

return

this;}

;function

move

($container, $content, speed));

$content.

css(

)//改變字型顏色

}else);

$content.

css(

)//改變字型顏色}}

//跑馬燈外掛程式end

VUE實現文字左右滾動跑馬燈

在components中定義乙個可引用的元件 此功能封裝並非原創,在網上看到的,看的忘了 components 部分 my outbox my inbox ref box my list v for item,index in sendval key index ref list 剛剛購買了產品 m...

flutter 跑馬燈橫向縱向滾動

跑馬燈滾動在專案中經常會用到,滾動有水平滾動和上下滾動兩種方式 1.橫向滾動 import dart async import package flutter material.dart class yymarquee extends statefulwidget yymarqueestate cr...

跑馬燈效果 文字上下滾動效果

void vieddidload裡面 void change陣列中的內容僅供測試用,具體內容可以通過後台伺服器獲取或者寫死 資料條數可以改變,我寫的是3條 if a 2 3 0 if a 3 3 0 類似下圖效果,文字滾動,左邊還有個小喇叭 動態更換可以使用uiimageview 自帶的方法進行設定...