使用 JS 實現文字左右跑馬燈

2022-07-20 07:54:07 字數 1436 閱讀 7915

ø

前言 其實,前面兩篇已經基本上實現了、文字跑馬燈,這裡為什麼還要學下文字左右跑馬燈呢?因為,雖然基本一樣,但實現起來還是有很大不同的,所以為了完整再補充一下。**如下: 1.

首先定義 css 樣式

#div1

.div

2.html **

我是一段文字,用於實現跑馬燈功能~

我也是一段文字,用於實現跑馬燈功能~

3.js

** function $(str)

var div1;//

外層div元素

window.onload = function()

//設定當前滾動元素的left、top 值

function move(x, y)

//重置當前滾動元素

function reset()

//初始化

function init()

div1.onmouseover = function()

var divs = div1.getelementsbytagname("div");

//設定所有元素,並加入陣列中

for(var i = 0; i < divs.length; i++) }//

開始 function start()

this.startloop();}//

開始滾動

function startloop() else if(div.offsettop > 0 - div.offsetheight) else

this.timer = settimeout('$("' + this.id + '").startloop();', this.delay);}//

停止滾動

function stoploop()

4.執行效果

ø知識點梳理

1.首先定義了 $ 的全域性函式,用於根據指定的元素 id 獲取元素,是不是有點類似 jquery ? 哈哈,不要被騙了,只支援 id 查詢。

2.因為元素是使用的 position: absolute;(絕對定位),所以可以使用 element.style.left = xx.px 來定位元素。

3.無論是外層 div 或內部的移動 div 元素,都使用了將屬性或方法直接賦值到元素的屬性之上,這樣在方法內部就可以直接使用 this 關鍵字訪問到元素。

4.使用 currentindex 記錄當前移動元素的索引,以及 loopitems 屬性用於儲存所有移動元素的陣列,這樣是乙個比較合理的設計,視乎有點物件導向的感覺?

5.在以上示例中,主要根據元素的 offsetleft、offsettop、offsetwidth、offsetheight 等屬性來定位移動元素的 left 和 top。

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

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

文字跑馬燈的CSS實現

使用 transform perspective 300px rotatey 67.3deg perspective 屬性定義 3d 元素距檢視的距離,與 perspective origin 屬性一同使用該屬性,就能夠改變 3d 元素的底部位置。transform origin 設定旋轉元素的基點...

js實現橫向跑馬燈效果

首先我們需要乙個html 的框架如下 我們的目的是實現ul中的內容進行橫向的一點一點滾動。ul中的內容應該是動態的。於是應該傳送ajax來進行內容的獲取拼接。ajax indexpage getsynoticeinfo success function result synoticeulnew em...