jQuery仿手机屏幕触屏滑动手势解锁代码.zip资源-CSDN文库

共8个文件

css：3个

png：2个

js：2个

版权申诉

jquery代码

jquery特效

jquery插件

141 浏览量 2023-09-22 00:17:08 上传评论收藏 60KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

jQuery仿手机屏幕触屏滑动手势解锁代码.zip （8个子文件）

index.js 10KB

jquery.min.js 91KB

img

bg.png 12KB

t.png 3KB

css

style.css 9KB

pattern-lock.min.css 716B

animate.min.css 60KB

index.html 7KB

<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>jQuery仿手机屏幕触屏滑动手势解锁代码</title>  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900'>  <link rel='stylesheet' href='css/animate.min.css'>  <link rel='stylesheet' href='https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css'>  <link rel='stylesheet' href='css/pattern-lock.min.css'>  <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="mhn-ui-wrap"> <div class="mhn-ui-page page-lock"> <div class="mhn-ui-date-time"> <div class="mhn-ui-time">6:02 PM</div> <div class="mhn-ui-day">星期三</div> <div class="mhn-ui-date">10月 10, 2019</div> </div> <div class="mhn-lock-wrap"> <div class="mhn-lock-title" data-title="绘制图案解锁"></div> <div class="mhn-lock"></div> </div> </div> <div class="mhn-ui-page page-home"> <div class="mhn-ui-app-time"> </div> <div class="mhn-ui-app-title-head"> <span class="mhn-ui-page-title">All Application</span> <div class="mhn-ui-filter"> <span class="mhn-ui-btn ion-funnel"></span> <div class="mhn-ui-filter-list"> <div data-filter="all" class="active">All Application</div> <div data-filter="general">General Application</div> <div data-filter="social">Social Application</div> <div data-filter="credits">Credits Application</div> </div> </div> </div> <div class="mhn-ui-row mhn-ui-apps"> <div class="mhn-ui-col" data-filter="general"> <div class="mhn-ui-icon" data-open="page-author"> <span class="ion-person" data-color="#2980b9"></span> <div class="mhn-ui-icon-title">Author</div> </div> </div> <div class="mhn-ui-col" data-filter="general"> <div class="mhn-ui-icon" data-open="page-contact"> <span class="ion-chatbox" data-color="#8e44ad"></span> <div class="mhn-ui-icon-title">Contact</div> </div> </div> <div class="mhn-ui-col" data-filter="general"> <div class="mhn-ui-icon" data-href="#"> <span class="ion-ios-briefcase" data-color="#f39c12"></span> <div class="mhn-ui-icon-title">Portfolio</div> </div> </div> <div class="mhn-ui-col" data-filter="general"> <div class="mhn-ui-icon" data-open="page-credits"> <span class="ion-information-circled" data-color="#16a085"></span> <div class="mhn-ui-icon-title">Credits</div> </div> </div> <div class="mhn-ui-col" data-filter="social"> <div class="mhn-ui-icon" data-href="#"> <span class="ion-social-facebook" data-color="#3b5998"></span> <div class="mhn-ui-icon-title">Facebook</div> </div> </div> <div class="mhn-ui-col" data-filter="social"> <div class="mhn-ui-icon" data-href="#"> <span class="ion-social-twitter" data-color="#56a3d9"></span> <div class="mhn-ui-icon-title">Twitter</div> </div> </div> <div class="mhn-ui-col" data-filter="credits"> <div class="mhn-ui-icon" data-href="#"> <span class="ion-social-javascript" data-color="#6639b6"></span> <div class="mhn-ui-icon-title">jQuery</div> </div> </div> <div class="mhn-ui-col" data-filter="credits"> <div class="mhn-ui-icon" data-href="#"> <span class="ion-ionic" data-color="#3e50b4"></span> <div class="mhn-ui-icon-title">Ionicons</div> </div> </div> <div class="mhn-ui-col" data-filter="credits"> <div class="mhn-ui-icon" data-href="#"> <span class="ion-social-css3-outline" data-color="#785447"></span> <div class="mhn-ui-icon-title">Animate</div> </div> </div> <div class="mhn-ui-col" data-filter="credits"> <div class="mhn-ui-icon" data-href="#"> <span class="ion-android-camera" data-color="#000000"></span> <div class="mhn-ui-icon-title">Unsplash</div> </div> </div> <div class="mhn-ui-col" data-filter="credits"> <div class="mhn-ui-icon" data-href="#"> <span class="ion-android-unlock" data-color="#4bae4f"></span> <div class="mhn-ui-icon-title">patternLock</div> </div> </div> </div> <div class="mhn-ui-bottom-link-bar"> <span class="mhn-ui-bottom-btn ion-ios-home"></span> <span class="mhn-ui-bottom-btn ion-ios-locked" onClick="mhnUI.page.show('page-lock')"></span> </div> </div> <div class="mhn-ui-page page-author"> <div class="mhn-ui-app-time"></div> <div class="mhn-ui-app-title-head"><span class="ion-person"></span> Author</div> <div class="text-center"><img class="flipInX animated" src="img/t.png" ></div> <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> <div class="mhn-ui-bottom-link-bar"> <span class="mhn-ui-bottom-btn ion-ios-home" onClick="mhnUI.page.show('page-home')"></span> <span class="mhn-ui-bottom-btn ion-ios-locked" onClick="mhnUI.page.show('page-lock')"></span> </div> </div> <div class="mhn-ui-page page-contact"> <div class="mhn-ui-app-time"> </div> <div class="mhn-ui-app-title-head"><span class="ion-chatbox"></span> Contact</div> <div class="mhn-ui-bottom-link-bar"> <span class="mhn-ui-bottom-btn ion-ios-home" onClick="mhnUI.page.show('page-home')"></span> <span class="mhn-ui-bottom-btn ion-ios-locked" onClick="mhnUI.page.show('page-lock')"></span> </div> </div> <div class="mhn-ui-page page-credits"> <div class="mhn-ui-app-time"> </div> <div class="mhn-ui-app-title-head"><span class="ion-information-circled"></span> Credits</div> <div class="mhn-ui-credit-list"> <div class="mhn-ui-credit"> <p>jQuery is a fast, small, and feature-rich JavaScript library.</p> </div> </div> <div class="mhn-ui-bottom-link-bar"> <span class="mhn-ui-bottom-btn ion-ios-home" onClick="mhnUI.page.show('page-home')"></span> <span class="mhn-ui-bottom-btn ion-ios-locked" onClick="mhnUI.page.show('page-lock')"></span> </div> </div> <div class="mhn-ui-dialog-wrap"> <div class="mhn-ui-dialog"> <div class="mhn-ui-dialog-title">Are you sure?</div> <p>This application wants to open an external link. To confirm, please click on yes button.</p> <a data-action="confirm" class="mhn-ui-dialog-btn" >Yes</a> <a data-action="cancel" class="mhn-ui-dialog-btn">No</a> </div> </div> </div> <div class="mhn-ui-info">绘制'Z'形状开始解锁:)</div> <script src="js/jquery.min.js"></script> <script src="js/index.js"></script> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p> <p>来源：<a href="https://www.lanrenzhijia.com/" target="_blank">懒人</a></p> </div> </body> </html>

评论收藏

内容反馈

版权申诉