本文主要和大家介紹原生javascript實現的全螢幕滾動功能,涉及javascript事件響應及頁面元素屬性動態操作相關實現技巧,需要的朋友可以參考下,希望能幫助到大家,
原理:
1. 計算目前瀏覽器畫面高度,每次翻頁顯示的內容高度即為螢幕高度
2. 對滑鼠滾輪事件進行監聽,注意滾輪事件的瀏覽器相容問題。
廢話不多說,直接上程式碼
html程式碼:
<p id="wrap"> <p id="main" style="top: 0;"> <p class="content num1"> <img src="https://www.bing.com/az/hprichbg/rb/SingingRingingTree_ZH-CN12497946624_1920x1080.jpg" width="100%" height="100%"> </p> <p class="content num2"> <img src="https://www.bing.com/az/hprichbg/rb/ShenandoahNP_ZH-CN9981989975_1920x1080.jpg" width="100%" height="100%"> </p> <p class="content num3"> <img src="https://www.bing.com/az/hprichbg/rb/GareSaintLazare_ZH-CN6611772290_1920x1080.jpg" width="100%" height="100%"> </p> <p class="content num4"> <img src="https://www.bing.com/az/hprichbg/rb/FriendshipSquare_ZH-CN8820626148_1920x1080.jpg" width="100%" height="100%"> </p> </p> </p>
css程式碼:
#wrap{overflow: hidden;width: 100%;} #main{top: 0;position: relative;} .content{width: 100%;margin: 0;height: 100%;} .num1{background: #e8e8e8;} .num2{background: pink;} .num3{background: yellow;} .num4{background: orange;}
js程式碼:
<script type="text/javascript"> var wrap = document.getElementById("wrap"); var pHeight = window.innerHeight; wrap.style.height = pHeight + "px"; var content = $(".content");//懒得写获取类的原生js代码了,直接用了jquery,=。= content.height(pHeight); var startTime = 0, //开始翻屏时间 endTime = 0, now = 0; if ((navigator.userAgent.toLowerCase().indexOf("firefox")!=-1)){ //for firefox; 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; } //滚动事件处理函数 function scrollFun(event){ startTime = new Date().getTime(); var delta = event.detail || (-event.wheelDelta); if ((endTime - startTime) < -1000) { //1秒内执行一次翻页 if (delta > 0 && parseInt(main.style.top) > -pHeight * ( content.length - 1)) { //向下翻页 now += pHeight ; turnPage(now); } if (delta < 0 && parseInt(main.style.top) < 0) { //向上翻页 now -= pHeight ; turnPage(now); } endTime = new Date().getTime(); } else{ event.preventDefault(); } } //翻页函数 function turnPage(now){ $("#main").animate({top:(-now+'px')},1000); //懒得写动画代码了,直接用了jquery,=。= } </script>
相關推薦:
基於jquery實作全螢幕捲動效果_javascript技巧
以上是javascript實現全螢幕滾動功能的詳細內容。更多資訊請關注PHP中文網其他相關文章!