特效描述：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>
