Frozen UI框架制作手机前端特效代码

如需定制开发（网站开发、二次开发）在线咨询，请点击>> QQ：753511799

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