一个全屏页面切换实例
生活随笔
收集整理的這篇文章主要介紹了
一个全屏页面切换实例
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
這里寫了一個全屏切換的實例，純手工，沒有使用任何插件~
<!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>總結
以上是生活随笔為你收集整理的一个全屏页面切换实例的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 微软承诺必应聊天将保持免费
- 下一篇： 常用数组方法