摘要:要實現(xiàn)全屏滾動的效果,無非是讓每頁的內(nèi)容頁高度達到瀏覽器窗口的高度。通過判斷鼠標滾動事件來設置定時器運動方式。每頁高度在實現(xiàn)滾輪的時候存在兼容性的問題,首先,對于鼠標滾動事件,有自己的解決方法,方法叫,鼠標滾動的時候觸發(fā)。
要實現(xiàn)全屏滾動的效果,無非是讓每頁的內(nèi)容頁高度達到瀏覽器窗口的高度。通過判斷鼠標滾動事件來設置定時器運動方式。
基本的html結(jié)構(gòu):
CSS:
*{ margin:0; padding:0; } #wrap{ overflow: hidden; width:100%; } #main{ height:100%; top:0; position: relative; } .page{ width:100%; margin:0; } #page1{ background:#555; } #page2{ background:#6CE26C; } #page3{ background:#fcfc46; } #page4{ background:#ff0000; }
如上,需要設置每個page項的高度大小都為窗口高度大小,并且,最外層容器,也就是wrap的高度也是一樣,如果漏了設置wrap高度,每頁的高度也是正常的,但是最后滾動的時候?qū)嶋H上會漏出其他頁的內(nèi)容。
var wrap = document.getElementById("wrap"); var main = document.getElementById("main"); var pages = main.getElementsByClassName("page"); var pageLen = pages.length; var pageH = document.body.clientHeight||document.documentElement.clientHeight; wrap.style.height = pageH + "px"; console.log("wrap:"+wrap.style.height); for(var i=0;ijavascript在實現(xiàn)滾輪的時候存在兼容性的問題,首先,對于鼠標滾動事件,firefox有自己的解決方法,方法叫DOMMouseScroll,鼠標滾動的時候觸發(fā)。其有關鼠標滾輪的信息則保存在detail屬性中,當向前滾動滾輪時,其值為-3的倍數(shù),當向后滾動滾輪時,其值為3的倍數(shù)。
其他瀏覽器(包括煩人的IE6、7)有一個名叫“mousewheel”的事件,該事件可以在任何元素上觸發(fā),而且可以冒泡(前面那個DOMMouseScroll也可以),該事件有一個屬性叫“wheelDelta”,向上滾動鼠標滾輪時,wheelDelta是120的倍數(shù);向下滾動鼠標滾輪時,wheelDelta是-120的倍數(shù)。
為了兼容,可以通過下面的方式:if ((navigator.userAgent.toLowerCase().indexOf("firefox")!=-1)){ document.addEventListener("DOMMouseScroll",scrollFun,false); }else if (document.addEventListener) { document.addEventListener("mousewheel",scrollFun,false); }else if (document.attachEvent) { document.attachEvent("onmousewheel",scrollFun); }else{ document.onmousewheel = scrollFun; }滾動事件處理函數(shù)無非就是判斷wheelDelta和delta的值還有外部容器main.offsetTop的值,然后觸發(fā)動畫效果,這里要注意,為了防止多次觸發(fā),比如用戶在短時間內(nèi)瘋狂滾滾輪,然而不想要瘋狂觸發(fā),那么需要在觸發(fā)動畫前后通過定時器設定閥值。
具體的實現(xiàn)參考下面代碼,已經(jīng)有注釋了:var wrap = document.getElementById("wrap"); var main = document.getElementById("main"); var pages = main.getElementsByClassName("page"); var pageLen = pages.length; var pageH = document.body.clientHeight||document.documentElement.clientHeight; wrap.style.height = pageH + "px"; //注意 console.log("wrap:"+wrap.style.height); for(var i=0;i0 && parseInt(main.offsetTop) > -(pageH*(pageLen-1))){ //向下滾動 now = now - pageH; //向下翻過一頁 toPage(now,"down"); console.log("wrap:"+wrap.style.height); //console.log("down.now:"+now); //console.log("main:"+main.offsetTop); } if(delta<0 && parseInt(main.offsetTop) < 0){ //向上滾動 now = now + pageH; toPage(now,"up"); } endTime = new Date().getTime(); //重置時間 }else{ event.preventDefault(); } } var sliderTime = null; function toPage(now,direction){ clearInterval(sliderTime);//執(zhí)行當前動畫同時清除之前的動畫 sliderTime = setInterval(function(){ var speed = 0; if(direction == "down"){ if(now<0 && now < main.offsetTop){ speed = -10; main.style.top = main.offsetTop+speed + "px"; if(main.style.top<=now){ main.style.top = now + "px"; } }else{ //當now的高度達到整個頁面高度,結(jié)束運動 main.style.top = now + "px"; speed = 0; clearInterval(sliderTime); } }else{ if(now<=0 && now >= main.offsetTop){ speed = 10; main.style.top = main.offsetTop+speed + "px"; if(main.style.top>=now){ main.style.top = now + "px"; } }else{ main.style.top = now + "px"; speed = 0; clearInterval(sliderTime); } } },10); } 上面的toPage方法是帶緩沖的效果,粗暴的方法不帶緩沖:
function toPageNow(now){ // $("#main").animate({top:(now+"px")},1000); //jquery實現(xiàn)動畫效果 setTimeout("main.style.top = now + "px"",1000); //javascript 實現(xiàn)動畫效果 }
文章版權歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/88869.html
摘要:今天來介紹一種簡單易行粗暴的方式來實現(xiàn)的視頻全屏播放。通過在一些主流視頻網(wǎng)站上的測試,在愛奇藝,土豆,芒果,等可正常全屏,在騰訊,樂視,等網(wǎng)站仍然無法全屏。經(jīng)測試,騰訊和沒有問題了,樂視和仍然不可以全屏,即使已經(jīng)找到了全屏按鈕的標識。 用過WebView的開發(fā)者們肯定都知道這里面的坑數(shù)不勝數(shù),加載緩慢,內(nèi)存泄露,文件選擇......沒錯,全屏播放視頻,這又是一個大坑。一個沒有修飾過...
摘要:今天來介紹一種簡單易行粗暴的方式來實現(xiàn)的視頻全屏播放。通過在一些主流視頻網(wǎng)站上的測試,在愛奇藝,土豆,芒果,等可正常全屏,在騰訊,樂視,等網(wǎng)站仍然無法全屏。經(jīng)測試,騰訊和沒有問題了,樂視和仍然不可以全屏,即使已經(jīng)找到了全屏按鈕的標識。 用過WebView的開發(fā)者們肯定都知道這里面的坑數(shù)不勝數(shù),加載緩慢,內(nèi)存泄露,文件選擇......沒錯,全屏播放視頻,這又是一個大坑。一個沒有修飾過...
隨著抖音、快手這類的視頻類app的火爆,移動端h5視頻類應用也隨之興起,使用video播放的場景也越來越多,本篇文章主要例舉了移動端視頻播放的一些場景和個人在開發(fā)過程中遇到的一些問題,希望在看過這篇文章后,能對開發(fā)者在移動端使用video播放時快速開發(fā)減少踩坑 全屏播放 視頻的全屏播放是移動端一個很常見的場景,因此我們需要對video設置全屏播放,全屏播放用到的方法是requestFullscre...
隨著抖音、快手這類的視頻類app的火爆,移動端h5視頻類應用也隨之興起,使用video播放的場景也越來越多,本篇文章主要例舉了移動端視頻播放的一些場景和個人在開發(fā)過程中遇到的一些問題,希望在看過這篇文章后,能對開發(fā)者在移動端使用video播放時快速開發(fā)減少踩坑 全屏播放 視頻的全屏播放是移動端一個很常見的場景,因此我們需要對video設置全屏播放,全屏播放用到的方法是requestFullscre...
閱讀 2620·2021-10-12 10:12
閱讀 778·2019-08-29 17:25
閱讀 2782·2019-08-29 17:24
閱讀 3204·2019-08-29 17:19
閱讀 1792·2019-08-29 15:39
閱讀 3031·2019-08-26 16:50
閱讀 1984·2019-08-26 12:17
閱讀 2694·2019-08-26 12:16