當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

一个全屏页面切换实例

發(fā)布時間：2023/12/31 编程问答 24 豆豆

生活随笔收集整理的這篇文章主要介紹了一个全屏页面切换实例小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

這里寫了一個全屏切換的實例，純手工，沒有使用任何插件~

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>小驚喜-給生活一點驚喜</title> <link rel="shortcut icon" type="image/ico" href="../imgs/jingxilogo.ico"/> <style>*{margin: 0px;padding: 0px;}#page_context{-webkit-transition: 1.5s ease all;}#page{width: 100%;height: 100%;overflow: hidden;}#pageOne{height: 600px;background: green; }#pageTwo{height: 600px;background: goldenrod;}#pageThree{height: 600px;background:hotpink;} </style> </head><div id="page"><div id="page_context"><div id="pageOne" style='text-align: center;color:white;padding-top:150px;'>第一頁</div><div id="pageTwo" style='text-align: center;color:white;padding-top:150px;'>第二頁</div><div id="pageThree" style='text-align: center;color:white;padding-top:150px;'>第三頁</div></div> </div> <script>var snap = 0;var _n = 3;var flag=0;pageChangeSize = function(){document.getElementById("page").style.height = window.innerHeight+"px";document.getElementById("pageOne").style.height = window.innerHeight+"px";document.getElementById("pageTwo").style.height = window.innerHeight+"px";document.getElementById("pageThree").style.height = window.innerHeight+"px";}window.onload = function () { //頁面加載時pageChangeSize();}window.onresize = function () { //窗口大小改變時pageChangeSize();}document.getElementById("page_context").addEventListener('webkitTransitionEnd', end, false); function end(){flag=0;}document.body.onmousewheel = function(event) {if(flag == 1){return}flag = 1;event = event || window.event;var direction = event.wheelDelta && (event.wheelDelta > 0 ? "mouseup" : "mousedown");if(direction ==="mouseup"){if(snap==0){flag=0return}snap--}else{if(snap>=(_n-1)){flag=0return}snap++}document.getElementById("page_context").style.webkitTransform="translateY(-"+(100/3*(snap))+"%)";}; </script> </html>

總結(jié)

以上是生活随笔為你收集整理的一个全屏页面切换实例的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。