利用jquery編寫文字水平的滾動字幕(跑馬燈)

2021-09-24 12:20:26 字數 1703 閱讀 6728

給大家推薦乙個用jquery編寫的滾動字幕程式,有的人也叫跑馬燈程式。這個程式相對於傳統跑馬燈程式增加了文字滾動速度調節、顯示一段時間後消失、滑鼠移入停止、滑鼠移出繼續滾動等功能,同時修改了重新整理介面時會先閃現一下字幕內容的bug。本程式基於jquery-3.4.0.min.js外掛程式版本,廢話不多說,直接上**。

$

("#content_small_tip")[

0].innerhtml =;(

function

($);

var options = $.

extend

(defaults, options)

;var speed =

(document.all)

? options.speed : math.

max(

1, options.speed -1)

;if($

(this)==

null

)return

;var $container =$(

this);

var $content =$(

"#content_small_tip");

var init_left = $container.

width()

; $content.

css();

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;}

, move:

function

($container, $content, speed));

$content.

css(

)//改變字型顏色

}else);

$content.

css(

)//改變字型顏色}}

});}

)(jquery)

;//外掛程式的呼叫$("#yourid").roll();

$(document)

.ready

(function()

);})

;

#container_small_tip

#content_small_tip

解決頁面重新整理時閃現一下字幕內容的bug,我是將一開始的字型顏色和背景色設定為相同顏色,這樣就起到了隱藏的效果(如果沒有背景,就直接將字型設定為白色),當滾動時再通過jquery呼叫css屬性改變字型顏色,這樣每次重新整理就不會閃現一下內容了。

進入時效果

居中時效果

移出時效果

11個用於提高排版水平的jquery文字效果外掛程式

排版是在網頁設計當中的乙個重要的元素,實現乙個高層次的排版風格可以讓你的網頁設計看起來更令人嘆為觀止,當你看到一些非同尋常的排版樣式,你很好奇這些絢麗的色彩文字搭配效果是如何實現的,往往我們第一印象是使用css實現的,可是對於自己來說感到又有一定的難度,如今的瀑布流效果,大背景縮圖效果,我們其中只關...

jquery外掛程式的編寫

一 區別兩種普通的寫法 jquery function 全寫為jquery document ready function function jquery 其實際上是執行 para 匿名方法,只不過是傳遞了jquery物件。jquery function 用於存放操作dom物件的 執行其中 時dom...

簡單的Jquery 外掛程式編寫

jquery如此流行,各式各樣的jquery外掛程式也是滿天飛。你有沒有想過把自己的一些常用的js功能也寫成jquery外掛程式呢?如果你的答案是肯定的,那麼來吧!和我一起學寫jquery外掛程式吧!先想好做個什麼功能 這是第一步,也是很重要的一步,鑑於咱們都是剛學習寫jquery外掛程式,所以,這...