js 全屏滾動

2022-05-06 01:39:10 字數 2184 閱讀 5763

嘗試著自己寫乙個全屏滾動的**,結果寫出來的效果是這樣的:

},//監聽

listen : function

() window.onmousewheel=document.onmousewheel=this

.scroll;

this.main.addeventlistener('touchstart',this.touch,false

); },

//滾輪事件

scroll : function

(e),

//觸控事件

touch :

else

if(e.type == 'touchmove')

else

if(e.type == 'touchend'||e.type == 'touchcancel')

},start:

function

(e),

move:

function

(e),

end:

function

(e) },

go :

function

(vaule),701);

},//解析某個 webkittransform 值

getposition : function

(webkittransform)

return

this

.position;

}}slider.init('main','roll','web');

動畫的話是用了css3,我發現在uc裡面 transform 並沒有起作用,查了下原來它是認 webkit-transform 的,之後是觸控也有問題,uc沒有 touchend 事件與之對應的是乙個 touchcancel 事件,好吧,最後在uc裡倒是動作了,但還有個問題,uc向上滑動時 過渡效果消失了,我懷疑是向上滑動(使用者向下瀏覽)時uc將 transition 的效果設定成0秒了,測試過後才知道uc會固定跳過第二個過渡效果,於是將過渡效果拆分成兩步。

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

其他,外掛程式 原理 1.計算當前瀏覽器螢幕高度,每次翻頁顯示的內容高度即為螢幕高度 2.對滑鼠滾輪事件進行監聽,注意滾輪事件的瀏覽器相容問題。廢話不多說,直接上 html 1 span style font size 18px span style font size 14px div id wr...

jQuery全屏滾動外掛程式fullPage使用

1.引入jquery.js和jquery.fullpage.min.js 2.書寫html div id dowebok div class section section1 h3 第一屏 h3 p fullpage.js 函式演示 p div div class section section2 ...

小程式功能之全屏滾動

想做乙個全屏滾動的效果,於是在網上找了乙個差不多的例子,但是覺得有些地方不是很好,於是改進了一下 原文 先上效果 console.log 開始 d.starty,結束 e.changedtouches 0 pagey console.log 時間戳之差 timestampdiffer if time...