一個樣式比較簡單的引導頁做了三天。。。
啟動頁是拿CSDN大神的源碼改的(忘了是哪位)
做引導頁的時候,遇上了頁面空白的情況,無任何描述文字,在不懂html的情況一個個改,後來發現實際上很簡單:
解題思路:
在每個頁面添加序號:
tips-1
一個頁面的結構是這樣的:
<div> <div style="background-color: #FFF;">//背景顏色 <a href="#"> <img src="./hello.jpg">//圖片 </a> <div id="tips-3">//要加這個頁面的標籤 <h2>輕巧高效</h2> <li>原生體驗,快人一步</li> <li>內心強大,浩瀚星空</li> </div> </div> </div>
然後在頁尾的函數增加之前對應的序號,格式 index==?||
<script src="./js/mui.min.js"></script><script> mui.plusReady(function() { plus.navigator.setFullscreen(true); plus.navigator.closeSplashscreen(); }); //按鈕點擊事件 document.getElementById("close").addEventListener('tap', function(event) { plus.storage.setItem("lauchFlag", "true"); plus.navigator.setFullscreen(false); plus.webview.currentWebview().close(); }, false); //圖片切換時,觸發動畫 document.querySelector('.mui-slider').addEventListener('slide', function(event) { //注意slideNumber是從0開始的; var index = event.detail.slideNumber+1; if(index==2||index==3||index==4){ //以此類推,有多少個頁面就寫多少個 var item = document.getElementById("tips-"+index); if(item.classList.contains("mui-hidden")){ item.classList.remove("mui-hidden"); item.classList.add("guide-show"); } }});</script>
效果圖
源碼:單獨1寫一個html,不是寫在index.html
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>引導頁</title> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <link rel="stylesheet" href="./css/mui.min.css"> <style> #close {/* 按鈕 */ /* position: absolute; */ width: 160px; left: 50%; margin-left: -80px; bottom: 15%; padding: 15px; color: #FFFF border-color: #5BC0DE; border-radius: 99em;/* 圓角 */ box-shadow: 5px 5px 5px #888888;/* 陰影 */ } .item-logo { width: 100%; height: 100%; position: relative; } /* .item-logo a { width: 200px; height: 200px; display: block; border: 1px solid #FFFFFF; border-color: rgba(255, 255, 255, 0.5); text-align: center; line-height: 200px; border-radius: 50%; font-size: 40px; color: #fff; position: absolute; top: 15%; left: 50%; margin-left: -100px; } */ .animate {/* 標題大字 */ position: absolute; left: 0; bottom: 15%; width: 100%; color: #007AFF; display: -moz-box; } .animate h2 { text-align: center; margin-bottom: 20px; } .animate li {/* 小字,左 */ width: 60%; height: 30px; line-height: px; list-style: none; font-size: 18px; text-align: right; } .animate li:nth-child(3) {/* 小字,右 */ text-align: left; float: right; } .animated {/* 彈出動畫 */ -webkit-animation-duration: 0.3s; -webkit-animation-play-state: paused; -webkit-animation-fill-mode: both; } .guide-show .bounceInDown { -webkit-animation-name: bounceInDown; -webkit-animation-play-state: running; -webkit-animation-delay: 1s; display: block; } .guide-show .bounceInLeft { -webkit-animation-name: bounceInLeft; display: block; -webkit-animation-play-state: running; } .guide-show .bounceInRight { -webkit-animation-name: bounceInRight; display: block; -webkit-animation-play-state: running; -webkit-animation-delay: 0.5s; } @-webkit-keyframes bounceInDown { 0%, 60%, 75%, 90%, 100% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } 90% { -webkit-transform: translate3d(0, 3px, 0); transform: translate3d(0, 3px, 0); } 100% { -webkit-transform: none; transform: none; } } @-webkit-keyframes bounceInLeft { 0%, 60%, 75%, 90%, 100% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } 100% { -webkit-transform: none; transform: none; } } @-webkit-keyframes bounceInRight { 0%, 60%, 75%, 90%, 100% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } 100% { -webkit-transform: none; transform: none; } } @-webkit-keyframes bounceInRight { 0%, 60%, 75%, 90%, 100% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } 100% { -webkit-transform: none; transform: none; } } </style> </head> <body> <div id="slider" style="background-color: black;"> <div> <!-- 第一張 --> <div> <div style="background-color: #FFF;"> <a href="#"> <img src="./hello.jpg"> </a> <div> <h2>毛茸茸的社區</h2> <li>匯聚獸圈力量</li> <li>你想要的,應有盡有</li> </div> </div> </div> <!-- 第二張 --> <div> <div style="background-color: #FFF;"> <a href="#"> <img src="./hello.jpg"> </a> <div id="tips-2"> <h2>狼爪通行證</h2> <li>一次註冊,全站通行</li> <li>你的獸圈數字ID通行證</li> </div> </div> </div> <!-- 第三張 --> <div> <div style="background-color: #FFF;"> <a href="#"> <img src="./hello.jpg"> </a> <div id="tips-3"> <h2>輕巧高效</h2> <li>原生體驗,快人一步</li> <li>內心強大,浩瀚星空</li> </div> </div> </div> <!-- 第4張 --> <div> <div style="background-color: #FFF;"> <a href="#"> <img src="./hello.jpg"> </a> <div id="tips-4"> <h2></h2> <li></li> <li></li> </div> </div> </div> <!-- 第6張 --> <div> <div style="background-color: #FFF;"> <a href="#"> <img src="./hello.jpg"> </a> <div> <div> <h2>發現更好的自己</h2> <button id='close'>戳</button> </div> </div> </div> </div> </div> <div > <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> <script src="./js/mui.min.js"></script> <script> mui.plusReady(function() { plus.navigator.setFullscreen(true); plus.navigator.closeSplashscreen(); }); //按鈕點擊事件 document.getElementById("close").addEventListener('tap', function(event) { plus.storage.setItem("lauchFlag", "true"); plus.navigator.setFullscreen(false); plus.webview.currentWebview().close(); }, false); //圖片切換時,觸發動畫 document.querySelector('.mui-slider').addEventListener('slide', function(event) { //注意slideNumber是從0開始的; var index = event.detail.slideNumber+1; if(index==2||index==3||index==4){ var item = document.getElementById("tips-"+index); if(item.classList.contains("mui-hidden")){ item.classList.remove("mui-hidden"); item.classList.add("guide-show"); } } }); </script> </body></html>