2. 程式人生 > >JS實現全屏頁面切換

JS實現全屏頁面切換

阿新 • • 發佈：2019-01-04
var ismoving=false;//使頁面滾動時停止監聽滾輪事件 var pageH=document.documentElement.clientHeight;//獲得當前視窗高度 var allheight=document.documentElement.scrollHeight;//獲得頁面總高度 //滑鼠滾輪事件 var scrollFunc=function(e){ e=e||window.event; if(ismoving){//當頁面正在滾動時停止監聽滾動事件 return
; }else{ //判斷瀏覽器IE，谷歌滑輪事件(wheelDelta) FireFox滾輪事件(detail) if(e.wheelDelta>0||e.detail<0){//當頁面向上滾動時 // alert("向上滑"); var current=window.pageYOffset;//獲取當前視窗顯示區左上角的Y位置 if(current==0){//當前頁面為第一頁時禁止向上滾動 return
; } pageScroll(-1,current);//執行滾動頁面函式 } if(e.wheelDelta<0||e.detail>0){//當頁面向下滾動時 // alert("向下滑"); var current=window.pageYOffset; if(current==allheight-pageH){//當前頁面為最後一頁時禁止向下滾動
return; } pageScroll(1,current); } } } //頁面視窗大小改變時重新獲取視窗高度 window.onresize=function(){ pageH=document.documentElement.clientHeight; } //繫結火狐瀏覽器的滾輪事件 if(document.addEventListener){ document.addEventListener('DOMMouseScroll',scrollFunc,false); } //當滾輪發生時執行scrollFunc window.onmousewheel=document.onmousewheel=scrollFunc; // window.onmousewheel=scrollFunc; //滾動頁面函式 var timer=null; function pageScroll(speed,current){ ismoving=true;//表明當前頁面正在滾動 if(speed>0){//如果速度為正表明正在向下滾動 var allH=current+pageH;//獲得目標位置 //執行滾動的動畫效果 timer=setInterval(function(){ var cur=window.pageYOffset;//每次都重新獲取當前視窗顯示區左上角的Y位置 window.scrollTo(0,cur+speed);//讓頁面滾動到當前視窗Y加上speed的位置處 //為了讓滾動有ease-in-out的效果，當滾動的距離大於需要滾動的高度的一半時降低速度 if(cur > (allH-(pageH/2))){ speed--; }else{ speed++; } //噹噹前視窗顯示區左上角Y位置超過了目標位置時 if(cur >= allH){ clearInterval(timer);//清除定時器 window.scrollTo(0,allH);//復原到目標位置 ismoving=false;//使滑鼠滾輪可以監聽 } },15) }else{ //速度為負，即向上滾動時，步驟同上 var allH=current-pageH; timer=setInterval(function(){ var cur=window.pageYOffset; window.scrollTo(0,cur+speed); if(cur < (allH+(pageH/2))){ speed++; }else{ speed--; } if(cur <= allH){ clearInterval(timer); window.scrollTo(0,allH); ismoving=false; } },15) } }

相關推薦

JS實現全屏頁面切換

var ismoving=false;//使頁面滾動時停止監聽滾輪事件 var pageH=document.documentElement.clientHeight;//獲得當前視窗高度 var allheight=document.documentElem

通過vw、vh單位實現全屏頁面的簡單自適應

剛剛入行前端開發一年，經驗欠缺，在新公司獨立承擔一個生產管理系統的前端開發工作。該系統操作頁面均為全屏，頁面固定但使用機器有所不同，且使用者在使用時不保證能記得按F11（手動捂臉），因此希望適應全屏和不同解析度以達成最好的顯示效果。 初版使用固定式佈局，完成後現場測試效果一般，後改為使用

JS實現全屏和退出全屏

直接上程式碼： //innerHTML指的是從物件的起始位置到終止位置的全部內容,包括Html標籤。//innerText 指的是從起始位置到終止位置的內容,但它去除Html標籤。 <script type="text/javascript"> function FullScreen(el)

使用fullpage.js實現全屏滾動經驗以及踩的坑

全屏滑動一般用在官方網站使用較多這種效果，有很多外掛可以實現這種效果，像swiper,fullpage,iscroll等。鑑於fullpage沒用過，所以就選擇它進行嘗試一下。 首先在網上搜索fullpage.js，會搜出一大堆相關部落格，看了之後發現還是很簡

Unity發布的WebGL頁面應用實現全屏/非全屏切換

功能 () 圖片 water term unity bool 控制 inter 很簡單，在場景中添加一個UGUI按鈕，實現點擊就切換全屏/非全屏狀態 其實發布出webgl之後，頁面上場景窗口右下會有一個按鈕，就是切換全屏的，但是想用代碼在程序裏實現 首先看頁面上那個按鈕的j

讓HTML頁面也可以實現全屏效果

JavaScript程式碼:function toggleFullScreen() { if (!document.fullscreenElement && // alternative standard method !document.mozFullScreenElement &am

vue頁面實現全屏功能

       頁面的樓層圖，需要做一個全屏功能，在網上查找了很多方法()；但是不相容IE（IE可以實現全屏功能，但是不能退出全屏），程式碼如下： 修改之後的程式碼： html部分片段: <div style="widt

unity怎樣實現全屏間的切換以及設定螢幕解析度

看似是很複雜的問題，但unity已經幫我們封裝好了  Screen.fullScreen = !Screen.fullScreen;//這樣就可以實現全屏和非全屏間的切換 Screen.SetResolution(800, 600, false);//這是設定螢幕解析度的方

android 全屏切換到非全屏 頁面抖動

解決辦法:    在全屏的activity finish之前手動退出全屏window.setFlags(WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN, WindowManager.LayoutParams.FLAG_

自定義MediaController來實現修改底部佈局作以及實現vedioview半屏與全屏的切換

因為直接使用系統vedioview，底部的MediaController佈局有點不好看，尤其是進度條，不能實現辦半屏與全屏的切換，自己網上看了下別人的資料，整理了下，做以筆記；初學者，勉強才實現這些功能，還有許多地方不明白。 看下效果：                   

JS如何在不同瀏覽器下實現全屏

手動將瀏覽器全屏，大家都知道非常簡單，按F11就OK了，但如果要用JS實現瀏覽器全屏了？ 對於IE瀏覽器實現全屏非常簡單，因為可以呼叫ActiveXObject物件。非IE的瀏覽器就無法辦到了，幸好，如今是html5的時代了，我們可以使用html5提供的api實現全屏功能。

利用fullpage.js外掛實現全屏滾動

fullpage.js是一個基於jQuery的外掛，能幫助我們很容易的實現酷炫的全屏網站的製作。一般全屏網站用幾個很大的圖片或色塊做背景，在新增一些簡單的內容，顯得格外的高階大氣上檔次。fullpage.js支援移動裝置主要的功能有: 支援滑鼠滾動 支援前進後

Android實戰簡易教程-第二十六槍（基於ViewPager實現微信頁面切換效果）

stat addview data android tid des viewpage 聊天 == 1.頭部布局文件top.xml:<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:and

簡單js實現豎行tab切換

block webkit des .class utf eight ref class clas <!DOCTYPE ><html lang="ru"><head><title>簡單js實現豎行tab切換</title&

js實現pdf對頁面的打印

點擊 dataurl png mage esp 數據 轉化 project java //-------------------------------點擊打印的圖標--------------------------------- <div class=

JS實現背景圖按時切換或者每次更新

chang func inter ++ 索引 樣式 rand 才會 math 首先要有一個添加背景圖片的div <div id="myDiv"></div> css樣式中添加背景tu圖 body{height:100%;} #myD

利用js實現全、反選、全不選功能(check)

box tag 實現 所有 利用 .get 乒乓球 獲取 get <!DOCTYPE html><html><head><meta charset="utf-8"/><title></ti

利用js實現全選、反選、全不選(button)

put () false 全選 charset btn tel pre fun <!DOCTYPE html><html><head><meta charset="utf-8"/><title>

android設置GridView高度自適應，實現全屏鋪滿效果

== post http istview div GridView dap item 拉伸 使GridView每個item的高度自適應拉伸，達到整個GridView剛好鋪滿全屏的效果。 public static void setGridViewMatchParent(G

轉： js實現全角半角檢測的方法

arc i++ word art ons tar console for comment //全角半角校驗 function issbccase(strTmp) { for (var i=0; i<strTmp.length; i++) {