首页>>Jquery文字>>Lock Screen屏幕手势解锁,手机解锁(2019-04-25)

Lock Screen屏幕手势解锁,手机解锁

Lock Screen屏幕手势解锁,手机解锁
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="mhn-ui-wrap">  
  2.     <div class="mhn-ui-page page-lock">  
  3.         <div class="mhn-ui-date-time">  
  4.             <div class="mhn-ui-time">6:02 PM</div>  
  5.             <div class="mhn-ui-day">星期三</div>  
  6.             <div class="mhn-ui-date">10月 10, 2019</div>  
  7.         </div>  
  8.         <div class="mhn-lock-wrap">  
  9.             <div class="mhn-lock-title" data-title="绘制图案解锁"></div>  
  10.             <div class="mhn-lock"></div>  
  11.         </div>  
  12.     </div>  
  13.   
  14.     <div class="mhn-ui-page page-home">  
  15.         <div class="mhn-ui-app-time"> </div>  
  16.         <div class="mhn-ui-app-title-head">  
  17.             <span class="mhn-ui-page-title">All Application</span>  
  18.             <div class="mhn-ui-filter">  
  19.                 <span class="mhn-ui-btn ion-funnel"></span>  
  20.                 <div class="mhn-ui-filter-list">  
  21.                     <div data-filter="all" class="active">All Application</div>  
  22.                     <div data-filter="general">General Application</div>  
  23.                     <div data-filter="social">Social Application</div>  
  24.                     <div data-filter="credits">Credits Application</div>  
  25.                 </div>  
  26.             </div>  
  27.         </div>  
  28.         <div class="mhn-ui-row mhn-ui-apps">  
  29.             <div class="mhn-ui-col" data-filter="general">  
  30.                 <div class="mhn-ui-icon" data-open="page-author">  
  31.                     <span class="ion-person" data-color="#2980b9"></span>  
  32.                     <div class="mhn-ui-icon-title">Author</div>  
  33.                 </div>  
  34.             </div>  
  35.             <div class="mhn-ui-col" data-filter="general">  
  36.                 <div class="mhn-ui-icon" data-open="page-contact">  
  37.                     <span class="ion-chatbox" data-color="#8e44ad"></span>  
  38.                     <div class="mhn-ui-icon-title">Contact</div>  
  39.                 </div>  
  40.             </div>  
  41.             <div class="mhn-ui-col" data-filter="general">  
  42.                 <div class="mhn-ui-icon" data-href="#">  
  43.                     <span class="ion-ios-briefcase" data-color="#f39c12"></span>  
  44.                     <div class="mhn-ui-icon-title">Portfolio</div>  
  45.                 </div>  
  46.             </div>  
  47.             <div class="mhn-ui-col" data-filter="general">  
  48.                 <div class="mhn-ui-icon" data-open="page-credits">  
  49.                     <span class="ion-information-circled" data-color="#16a085"></span>  
  50.                     <div class="mhn-ui-icon-title">Credits</div>  
  51.                 </div>  
  52.             </div>        
  53.             <div class="mhn-ui-col" data-filter="social">  
  54.                 <div class="mhn-ui-icon" data-href="#">  
  55.                     <span class="ion-social-facebook" data-color="#3b5998"></span>  
  56.                     <div class="mhn-ui-icon-title">Facebook</div>  
  57.                 </div>  
  58.             </div>  
  59.             <div class="mhn-ui-col" data-filter="social">  
  60.                 <div class="mhn-ui-icon" data-href="#">  
  61.                     <span class="ion-social-twitter" data-color="#56a3d9"></span>  
  62.                     <div class="mhn-ui-icon-title">Twitter</div>  
  63.                 </div>  
  64.             </div>  
  65.               
  66.             <div class="mhn-ui-col" data-filter="credits">  
  67.                 <div class="mhn-ui-icon" data-href="#">  
  68.                     <span class="ion-social-javascript" data-color="#6639b6"></span>  
  69.                     <div class="mhn-ui-icon-title">jQuery</div>  
  70.                 </div>  
  71.             </div>  
  72.             <div class="mhn-ui-col" data-filter="credits">  
  73.                 <div class="mhn-ui-icon" data-href="#">  
  74.                     <span class="ion-ionic" data-color="#3e50b4"></span>  
  75.                     <div class="mhn-ui-icon-title">Ionicons</div>  
  76.                 </div>  
  77.             </div>  
  78.             <div class="mhn-ui-col" data-filter="credits">  
  79.                 <div class="mhn-ui-icon" data-href="#">  
  80.                     <span class="ion-social-css3-outline" data-color="#785447"></span>  
  81.                     <div class="mhn-ui-icon-title">Animate</div>  
  82.                 </div>  
  83.             </div>  
  84.             <div class="mhn-ui-col" data-filter="credits">  
  85.                 <div class="mhn-ui-icon" data-href="#">  
  86.                     <span class="ion-android-camera" data-color="#000000"></span>  
  87.                     <div class="mhn-ui-icon-title">Unsplash</div>  
  88.                 </div>  
  89.             </div>  
  90.             <div class="mhn-ui-col" data-filter="credits">  
  91.                 <div class="mhn-ui-icon" data-href="#">  
  92.                     <span class="ion-android-unlock" data-color="#4bae4f"></span>  
  93.                     <div class="mhn-ui-icon-title">patternLock</div>  
  94.                 </div>  
  95.             </div>  
  96.         </div>  
  97.         <div class="mhn-ui-bottom-link-bar">  
  98.             <span class="mhn-ui-bottom-btn ion-ios-home"></span>  
  99.             <span class="mhn-ui-bottom-btn ion-ios-locked" onClick="mhnUI.page.show('page-lock')"></span>  
  100.         </div>  
  101.     </div>  
  102.   
  103.     <div class="mhn-ui-page page-author">  
  104.         <div class="mhn-ui-app-time"></div>  
  105.         <div class="mhn-ui-app-title-head"><span class="ion-person"></span> Author</div>  
  106.         <div class="text-center"><img class="flipInX animated" src="img/t.png" ></div>  
  107.         <p class="text-center">Hi, It's me Mohan. I'm a web and graphics designer. Designing is my passion and I have been working on various designing projects.</p>  
  108.         <div class="mhn-ui-bottom-link-bar">  
  109.             <span class="mhn-ui-bottom-btn ion-ios-home" onClick="mhnUI.page.show('page-home')"></span>  
  110.             <span class="mhn-ui-bottom-btn ion-ios-locked" onClick="mhnUI.page.show('page-lock')"></span>  
  111.         </div>  
  112.     </div>  
  113.   
  114.     <div class="mhn-ui-page page-contact">  
  115.         <div class="mhn-ui-app-time"> </div>  
  116.         <div class="mhn-ui-app-title-head"><span class="ion-chatbox"></span> Contact</div>  
  117.         <div class="mhn-ui-bottom-link-bar">  
  118.             <span class="mhn-ui-bottom-btn ion-ios-home" onClick="mhnUI.page.show('page-home')"></span>  
  119.             <span class="mhn-ui-bottom-btn ion-ios-locked" onClick="mhnUI.page.show('page-lock')"></span>  
  120.         </div>  
  121.     </div>  
  122.   
  123.     <div class="mhn-ui-page page-credits">  
  124.         <div class="mhn-ui-app-time"> </div>  
  125.         <div class="mhn-ui-app-title-head"><span class="ion-information-circled"></span> Credits</div>  
  126.         <div class="mhn-ui-credit-list">  
  127.             <div class="mhn-ui-credit">  
  128.                 <p>jQuery is a fast, small, and feature-rich JavaScript library.</p>  
  129.             </div>  
  130.               
  131.         </div>  
  132.         <div class="mhn-ui-bottom-link-bar">  
  133.             <span class="mhn-ui-bottom-btn ion-ios-home" onClick="mhnUI.page.show('page-home')"></span>  
  134.             <span class="mhn-ui-bottom-btn ion-ios-locked" onClick="mhnUI.page.show('page-lock')"></span>  
  135.         </div>  
  136.     </div>  
  137.     <div class="mhn-ui-dialog-wrap">  
  138.         <div class="mhn-ui-dialog">  
  139.             <div class="mhn-ui-dialog-title">Are you sure?</div>  
  140.             <p>This application wants to open an external link. To confirm, please click on yes button.</p>  
  141.             <a data-action="confirm" class="mhn-ui-dialog-btn" >Yes</a>  
  142.             <a data-action="cancel" class="mhn-ui-dialog-btn">No</a>  
  143.         </div>  
  144.     </div>  
  145. </div>  

 


原文地址:http://www.freejs.net/article_jquerywenzi_748.html