小模組 公告滾動並暫停

2022-03-09 13:13:28 字數 707 閱讀 4296

話說上回,我們寫了個返回頁面頂部的小模組,這回我們寫乙個同樣很常見的模組,即公告滾動並暫停模組。公告滾動,最簡單的寫法是使用maquee標籤,這個可以讓你內容的內容向上下左右滾動,但是很多高階功能,比如週期性停留無法實現。把週期性停留作為需求,很多**做了這種公告滾動:

(截圖自谷姐首頁)。

以下呢,咱們也來做乙個。

先把最終演示放出來:

公告內容一

公告內容二

html**:

<

div

class

="ann"

>

<

div

class

="in"

>

<

a href

="#"

>

公告內容一

a>

<

a href

="#"

>

公告內容二

a>

div>

div>

css**:

.ann

.in.in a

js**:

$(function

());

function

annbox(),timerock,

function

());

}注:小模組系列均基於jquery,歸納工作中隨時做的可重用的小東西

VUE 滾動公告

vue 實現滾動公告思路 1.固定顯示區域的高度,超出隱藏,2.絕對定位,使用transition過渡效果改變top值設定為顯示區域高度的倍數,3.必不可少的定時器setinterval設定每條資訊顯示多長時間 4.v for迴圈出要顯示的資訊 5.v bind class繫結過渡效果的類名,當最後...

微信小程式之公告字幕滾動(自下而上)

實現框內的文字自下而上的自動迴圈滾動。demo 通過控制滑動條來完成字幕滾動,通過setinterval完成字幕迴圈滾動。wxml 09 08 很多人的一生,基本都是自己跟別人較勁,比如別人對自己的期待,比如把別人看得太重把自己看得太輕。其實乙個人最應該考慮的問題是,自己如何與自己相處,比如人去樓空...

公告模組phpcms

標籤使用 功能模組 公告模組 1.公告模組 公告模組pc標籤呼叫說明 模組名 announce 模組提供的可用操作 操作名說明 lists 公告資料列表 lists操作說明如下 2.公告資料列表 lists 可用引數 引數名是否必須 預設值說明 siteid 否當前站點id 站點id 例子 1 2 ...