例項 原生 js 實現全屏滾動效果

2022-08-15 21:06:13 字數 1496 閱讀 7570

其他,外掛程式:

原理: 1. 計算當前瀏覽器螢幕高度,每次翻頁顯示的內容高度即為螢幕高度

2. 對滑鼠滾輪事件進行監聽,注意滾輪事件的瀏覽器相容問題。

廢話不多說,直接上**

html**:

1

<

span

style

="font-size:18px;"

><

span

style

="font-size:14px;"

><

div

id="wrap"

>

2<

div

id="main"

style

="top: 0;"

>

3<

div

class

="content num1"

>

4<

img

src=""

width

="100%"

height

="100%"

>

5div

>

6<

div

class

="content num2"

>

7<

img

src=""

width

="100%"

height

="100%"

>

8div

>

9<

div

class

="content num3"

>

10<

img

src=""

width

="100%"

height

="100%"

>

11div

>

12<

div

class

="content num4"

>

13<

img

src=""

width

="100%"

height

="100%"

>

14div

>

15div

>

16div

>

span

>

span

>

css**:

1

#wrap

2#main

3.content

4.num1

5.num2

6.num3

7.num4

js**:

1

js 全屏滾動

嘗試著自己寫乙個全屏滾動的 結果寫出來的效果是這樣的 監聽 listen function window.onmousewheel document.onmousewheel this scroll this.main.addeventlistener touchstart this.touch,f...

原生JS實現彈幕效果

純屬無聊寫的,可能有很多問題,歡迎批評指教。效果圖 圖一是預設的一些彈幕,圖二是自己發射的彈幕,效果是一樣的。demo位址 首先是彈幕的位置,是要從最右滑到最左,為了防止隨機高度彈幕會覆蓋的問題,設定了通道。每乙個通道是從左到右的一條,高度固定,這樣不同通道的彈幕不會相互覆蓋。彈幕滑動就是簡單設定c...

Vue使用原生JS實現錨點跳轉滾動效果

本文使用iview 左側導航元素 測試 右側滾動元素 史蒂夫 賈伯斯 斯蒂夫 蓋瑞 沃茲尼亞克 斯蒂夫 蓋瑞 沃茲尼亞克 stephen gary wozniak 美國電腦工程師,曾與史蒂夫 賈伯斯合夥創立蘋果電腦 今之蘋果公司 斯蒂夫 蓋瑞 沃茲尼亞克曾就讀於美國科羅拉多大學,後轉學入美國著名高等...