mui啟動頁 - CSDN

2021-01-22 CSDN技術社區

一個樣式比較簡單的引導頁做了三天。。。

啟動頁是拿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>

 

相關焦點

  • 龍婆Mui/婆譚mui 佛曆2534年 二期牛奶必打
    龍婆Mui/婆譚mui 佛曆2534年 二期牛奶必打 ,以下是龍婆mui牛奶必打的詳細資料,可以讓大家了解一個國內並不為人知的好師傅。
  • mui開發之dialog組件
    之前已介紹了mui框架的init組件、event組件,那麼,接下來,我們來看看如何使用dialog組件。這也是常見的mui框架組件之一。      下面將詳細介紹dialog組件的常用用法。首先,我們新建一個移動APP項目。
  • 小白如何飛一樣的搭造MUI移動端框架
    1 為什麼要應用框架目前HTML5開發者面臨的問題有很多,例如:瀏覽器切頁白屏、轉頁動畫較差、浮動元素抖動、無法流暢下拉刷新。並且在Android低端機運行更是表現不足:瀏覽器默認控制項樣式和數量較少,致使製作一個漂亮的控制項非常麻煩。(1)目前的可尋移動框架有哪些?
  • UI基礎知識:啟動頁、閃屏和引導頁的區別
    我們在打開APP時候總會跳出一些頁面,有人說是啟動頁也有人叫開機圖,各種叫法讓人傻傻分不清楚。那麼在啟動APP的時候我們看到的頁面到底是什麼,又有什麼區別呢?下面就是關於啟動頁、閃屏、引導頁的簡單的歸納和總結,希望對大家有所幫助。
  • 如何使用HBuilderX工具創建mui項目並使用摺疊面板控制項
    創建項目2、創建完mui項目,展開項目並查看項目結構找到項目中的index.html,並打開4、在<body></body>標籤中,插入一個無序列表,並使用mui中的樣式類插入一個無序列表,並使用mui中的樣式5、保存代碼並打開瀏覽器,可以查看到一個摺疊面板
  • APP設計中啟動頁的設計方法
    與其給用戶看代碼運行的過程,倒不如給用戶看一張好看的圖片或者有意思的動畫,所以啟動頁是為了解決用戶因等待時間過長而產生厭煩的情緒問題,保障用戶使用流暢。啟動頁可以告訴用戶,你剛才的操作是有效的,軟體正在啟動中。所以啟動頁應當為優化用戶體驗做出貢獻,能充當產品和用戶之間產生互動的橋梁。
  • MUI框架之沉浸式
    mui框架之沉浸式,最近接一個私活需要把app頁面兼容android和ios系統,但是導航欄還要和手機通知欄的顏色一致美觀,在網上找了許多,也試過很多次大部分都是重合,也嘗試過用js但是沒有成果,但是經過自己的琢磨在網上碰到了下面這種經過嘗試,可以使用。
  • Python爬取CSDN 2020 博客之星實時數據排名
    打開 Google Chrome 的審查工具,可以找到一個 getUsers 的請求,請求地址為:https://bss.csdn.net/m/topic/blog_star2020/getUsers,請求方式為 POST,返回的是 JSON 格式的數據,裡面包含了每一位博主的相關信息。
  • 無法啟動windowsdefender - CSDN
    但是最近有用戶反映,defender無法啟動了,針對於這一問題,好系統重裝助手來為大家講解一下如何解決。3、然後找到常規欄裡的服務狀態,點擊「啟動」後確定就可以了。 還有一些用戶遇到啟動鍵是灰色的們無法操作,如果遇到這一問題,解決方法也很簡單。
  • android 熱啟動設置 - CSDN
    問題點:部分apk熱啟動會顯示一下白屏/LOGO,導致apk熱啟動比對比機慢. 分析:拍攝apk(日曆或者設置apk)的熱啟動過程.慢動作播放,可以明顯的看到apk啟動過程中先顯示白屏/LOGO.而對比機則沒有這一過程.
  • android中的啟動模式 - CSDN
    在Android中Activity的啟動模式決定了Activity的啟動運行方式。   Android總Activity的啟動模式分為四種: Activity啟動模式設置: <activity android:name=".MainActivity" android:launchMode="standard" />Activity的四種啟動模式: 1. standard 模式啟動模式,
  • Edge獲得新特性:加速啟動、垂直標籤頁等等
    顧名思義,通過開機之後在後臺加載 Edge 進程從而減少 Edge 瀏覽器的啟動時間。● 垂直標籤頁布局另一項值得關注的變化就是引入垂直標籤頁布局,這允許標籤欄位於屏幕的側面。這個選項對於那些使用超寬顯示器的人來說特別有用,但它也是一種自定義瀏覽器外觀和感覺的好方法。
  • 啟動會是什麼意思 - CSDN
    一旦您的計算機完成了啟動過程,並且您牢牢地掌握著作業系統內部的嗡嗡聲,BIOS還有什麼要做的事情嗎? 我一直想知道,BIOS(除了執行POST , 啟動引導程序並在按下電源按鈕後將控制權傳遞給OS)在作業系統運行時是否有任何用途或功能? Does the operating system communicate with the BIOS while running and if so, how?
  • windows10卡啟動修復專題及常見問題 - CSDN
    例如,當計算機無法正常啟動、網絡連接問題以及應用程式或Windows Update無法下載更新時,可以使用安全模式對其進行故障排除。這也是診斷和修復顯卡驅動程序問題以及執行病毒掃描以刪除任何惡意軟體的良好環境,否則,當作業系統在正常模式下運行時,將無法修復該惡意軟體。過去,以安全模式啟動就像重新啟動電腦並按「F8」鍵一樣容易,但Windows 10不再是這種情況了。
  • android 服務啟動後專題及常見問題 - CSDN
    Launcher啟動流程1、AMS的systemReady()上回講述了《Android系統啟動流程》,當系統在Framework層經過一系列多種語言程序有來有回之後,系統服務會被其中,其中包括AMS,startOtherServices()方法執行後階段,各種被啟動起來的
  • App開屏頁如何設計?來看這五個常用的方法
    合理的啟動頁能激發用戶的潛意識,有助於吸引和留存合適的用戶。 在深入研究設計策略之前,先來了解一下啟動畫面的基本知識。 什麼是啟動畫面? 啟動畫面指一系列連續的使用體驗——從用戶點擊應用圖標開始到內容加載完成為止。
  • linux 桌面無法啟動專題及常見問題 - CSDN
    Gnome Clocks App Search Ubuntu啟動程序,你應該會看到一個界面,提供一些選項,例如添加世界時鐘、設置鬧鐘、使用秒表和計時器。
  • kappa一致性檢驗教程 - CSDN
    fromTitle=kappa%E7%B3%BB%E6%95%B0https://zhuanlan.zhihu.com/p/67844308https://blog.csdn.net/huipingx/article/details/85019294統計諮詢. kappa還有負值?王軍. Kappa係數在一致性評價中的應用研究[D].
  • 開發人員Muirey03進行的一項名為Duo的新越獄調整起作用的地方
    對於僅使用Apple股票控制中心切換和快捷鍵功能的用戶來說,第二頁應該綽綽有餘。但是引用開發人員的話,如果用戶還利用與Control Center相關的附加組件(如CCSupport和Silo),則該調整確實會發光。安裝Duo後,您可以在Control Center界面中左右滑動,以在頁面之間移動。該調整在縱向方向上效果最好,因為它在橫向方向上似乎表現出一些錯誤。