特效描述:Frozen UI框架制作 手机前端特效。Frozen UI框架制作手机前端特效图片轮播 模拟滚动 辅助类 按钮 表单 列表 通知 提示条 弹出框 选项卡 搜索框 表格 刷新 会员图标 Cover动画 滚动视差动画等多种手机特效代码
代码结构
1. 引入CSS
<link rel="stylesheet" type="text/css" href="http://i.gtimg.cn/vipstyle/frozenui/1.2.0/css/frozen.css?_bid=306"/> <link rel="stylesheet" type="text/css" href="frozenui/1.2.0/css/frozen.css"> <link rel="stylesheet" type="text/css" href="http://i.gtimg.cn/vipstyle/frozenui/1.2.0/css/frozen.css?_bid=306"/> <link rel="stylesheet" type="text/css" href="frozenui/1.2.0/css/frozen.css">
2. 引入JS
<script type="text/javascript" src="http://tajs.qq.com/stats?sId=37342703" charset="UTF-8"></script> <script src="frozenjs/lib/zepto.min.js"></script> <script type="text/javascript" src="http://tajs.qq.com/stats?sId=37342703" charset="UTF-8"></script> <script src="frozenjs/lib/zepto.min.js"></script>
3. HTML代码
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="author" content="ISUX"> <meta name="format-detection" content="telephone=no" /> <meta name="viewport" content="width=device-width, user-scalable=no"/> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <title>FrozenUI组件库</title> <!--统计代码 --> <script type="text/javascript"> var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://"); document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F3c5e509616a8353ee908823c8b29510c' type='text/javascript'%3E%3C/script%3E")); </script> <!-- <link rel="stylesheet" type="text/css" href="http://i.gtimg.cn/vipstyle/frozenui/1.2.0/css/frozen.css?_bid=306"/> --> <style > .title { padding: 0 15px; line-height: 48px; font-size: 20px; color: #00A5E3; position: relative; } .title .ui-btn{ position: absolute; right: 15px; top: 50%; margin-top: -15px; } body>a{display: none;} </style> </head> <body ontouchstart=""> <h2 class="title"><a href="index.html">Frozen UI</a> <a class="ui-btn" href="http://frozenui.github.io/">回frozen首页</a></h2> <ul class="ui-list ui-list-text ui-list-link ui-border-tb"> <li class="ui-border-t" data-href="slider.html"> 轮播 </li> <li class="ui-border-t" data-href="scroller.html"> 模拟滚动 </li> <li class="ui-border-t" data-href="atom.html"> 辅助类 </li> <li class="ui-border-t" data-href="btn.html"> 按钮 </li> <li class="ui-border-t" data-href="form.html"> 表单 </li> <li class="ui-border-t" data-href="list.html"> 列表 </li> <li class="ui-border-t" data-href="notice.html"> 通知 </li> <li class="ui-border-t" data-href="tips.html"> 提示条 </li> <li class="ui-border-t" data-href="dialog.html"> 弹出框 </li> <li class="ui-border-t" data-href="tab.html"> 选项卡 </li> <li class="ui-border-t" data-href="searchbar.html"> 搜索框 </li> <li class="ui-border-t" data-href="table.html"> 表格 </li> <li class="ui-border-t" data-href="loading.html"> 刷新 </li> <li class="ui-border-t" data-href="icon-vip.html"> 会员图标 </li> <li class="ui-border-t" data-href="cover.html"> Cover动画 </li> <li class="ui-border-t" data-href="parallax.html"> 滚动视差动画 </li> </ul> <script> $('.ui-list-text li').click(function(){ location.href= $(this).data('href'); }); </script> </body> </html>