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



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

210 837 280



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



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到