| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105 |
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <title></title>
- <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
- <link rel="stylesheet" href="../style/weui.css"/>
- <link rel="stylesheet" href="../style/weui2.css"/>
- <link rel="stylesheet" href="../style/weui3.css"/>
- <script src="../zepto.min.js"></script>
- <script>
- $(function(){
- var ani = $("#ani");
- $('.weui_btn').click(function(){
-
- if(ani.hasClass($(this).data('ani'))){
- ani.removeClass();
- }else{
- ani.addClass($(this).data('ani')+" animated checked");
-
- }
- })
-
- });
-
- </script>
- </head>
- <body ontouchstart style="background-color: #f8f8f8;">
- <div class="weui-header bg-blue">
- <div class="weui-header-left"> <a class="icon icon-109 f-white">返回</a> </div>
- <h1 class="weui-header-title">我们都爱小电影</h1>
- <div class="weui-header-right"><a class="icon icon-83 f-white">更多</a></div>
- </div>
- <br>
- <div class="bg-orange weui-header ">
- <div class="weui-header-left"> <a class="icon icon-109 f-white"></a> </div>
- <h1 class="weui-header-title">千里中国心</h1>
- <div class="weui-header-right"><a class="icon icon-22 f-white"></a></div>
- </div>
- <br>
-
- <div class="weui_btn_primary weui-header ">
- <div class="weui-header-left"> <a class="icon icon-109 f-white"></a> </div>
- <h1 class="weui-header-title">清朝是历史的倒退</h1>
- <div class="weui-header-right"><a class="icon icon-22 f-white"></a></div>
- </div>
- <br>
- <div class="weui_btn_warn weui-header ">
- <div class="weui-header-left"> <a class="icon icon-109 f-white"></a> </div>
- <h1 class="weui-header-title">孔融是个假道学</h1>
- <div class="weui-header-right"><a class="icon icon-22 f-white"></a></div>
- </div>
- <br>
- <div class="weui_btn_default weui-header ">
- <div class="weui-header-left"> <a class="icon icon-109 f-green"></a> </div>
- <h1 class="weui-header-title f-green">三国是一部精彩历史</h1>
- <div class="weui-header-right"><a class="icon icon-108 f-green"></a></div>
- </div>
- <div class="page-hd">
- <div class="weui-reddot">默认红点</div>
- <div class="weui-reddot-border">白边框红点</div>
- <div class="weui-reddot-s">小红点</div>
- <i class="weui-reddot weui-reddot-static"></i>开头
- <div class="weui_cells_title">红色,上标,标记图标<span class="icon icon-3 f20 f-green btn"></span><sup><span class="weui-badge">1</span></sup></div>
- <div class="weui_cells_title">小红点 比较大<span class="weui-badge weui-badge-dot" style="margin-left: 5px;margin-right: 5px;"></span></div>
- <div class="weui_cells_title">徽标<span class="weui-badge" style="margin-left: 5px;">8</span></div>
- <div class="weui_cells_title">徽标<span class="weui-badge" style="margin-left: 5px;">812</span></div>
- <div class="weui_cells_title">徽标<span class="weui-badge" style="margin-left: 5px;">New</span></div>
- </div>
- <div class="weui_cells">
- <div class="weui_cell">
- <div class="weui_cell_hd" style="position: relative;margin-right: 10px;">
- <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAMAAAAOusbgAAAAeFBMVEUAwAD///+U5ZTc9twOww7G8MYwzDCH4YcfyR9x23Hw+/DY9dhm2WZG0kbT9NP0/PTL8sux7LFe115T1VM+zz7i+OIXxhes6qxr2mvA8MCe6J6M4oz6/frr+us5zjn2/fa67rqB4IF13XWn6ad83nxa1loqyirn+eccHxx4AAAC/klEQVRo3u2W2ZKiQBBF8wpCNSCyLwri7v//4bRIFVXoTBBB+DAReV5sG6lTXDITiGEYhmEYhmEYhmEYhmEY5v9i5fsZGRx9PyGDne8f6K9cfd+mKXe1yNG/0CcqYE86AkBMBh66f20deBc7wA/1WFiTwvSEpBMA2JJOBsSLxe/4QEEaJRrASP8EVF8Q74GbmevKg0saa0B8QbwBdjRyADYxIhqxAZ++IKYtciPXLQVG+imw+oo4Bu56rjEJ4GYsvPmKOAB+xlz7L5aevqUXuePWVhvWJ4eWiwUQ67mK51qPj4dFDMlRLBZTqF3SDvmr4BwtkECu5gHWPkmDfQh02WLxXuvbvC8ku8F57GsI5e0CmUwLz1kq3kD17R1In5816rGvQ5VMk5FEtIiWislTffuDpl/k/PzscdQsv8r9qWq4LRWX6tQYtTxvI3XyrwdyQxChXioOngH3dLgOFjk0all56XRi/wDFQrGQU3Os5t0wJu1GNtNKHdPqYaGYQuRDfbfDf26AGLYSyGS3ZAK4S8XuoAlxGSdYMKwqZKM9XJMtyqXi7HX/CiAZS6d8bSVUz5J36mEMFDTlAFQzxOT1dzLRljjB6+++ejFqka+mXIe6F59mw22OuOw1F4T6lg/9VjL1rLDoI9Xzl1MSYDNHnPQnt3D1EE7PrXjye/3pVpr1Z45hMUdcACc5NVQI0bOdS1WA0wuz73e7/5TNqBPhQXPEFGJNV2zNqWI7QKBd2Gn6AiBko02zuAOXeWIXjV0jNqdKegaE/kJQ6Bfs4aju04lMLkA2T5wBSYPKDGF3RKhFYEa6A1L1LG2yacmsaZ6YPOSAMKNsO+N5dNTfkc5Aqe26uxHpx7ZirvgCwJpWq/lmX1hA7LyabQ34tt5RiJKXSwQ+0KU0V5xg+hZrd4Bn1n4EID+WkQdgLfRNtvil9SPfwy+WQ7PFBWQz6dGWZBLkeJFXZGCfLUjCgGgqXo5TuSu3cugdcTv/HjqnBTEMwzAMwzAMwzAMwzAMw/zf/AFbXiOA6frlMAAAAABJRU5ErkJggg==" style="width: 50px;display: block"/>
- <span class="weui-badge" style="position: absolute;top: -.4em;right: -.4em;">8</span>
- </div>
- <div class="weui_cell_bd">
- <p>联系人名称</p>
- <p style="font-size: 13px;color: #888888;">摘要信息</p>
- </div>
- </div>
- </div>
-
- <div id="ani" style="width:50px;height:50px;font-size:18px;background:#04b567;opacity:0.5;border-radius:50%;"><i class="icon icon-99 f45"></i></div>
-
- <div class="page-hd">
- <button data-ani="swing" class="weui_btn weui_btn_mini weui_btn_primary f-white">swing</button>
- <button data-ani="shake" class="weui_btn weui_btn_mini weui_btn_primary f-white">shake</button>
- <button data-ani="xz360" class="weui_btn weui_btn_mini weui_btn_primary f-white">xz360</button>
- <button data-ani="xz360 reverse" class="weui_btn weui_btn_mini weui_btn_primary f-white">反向reverse</button>
- <button data-ani="fadeIn" class="weui_btn weui_btn_mini weui_btn_primary f-white">淡入用于显示fadeIn</button>
- <button data-ani="fadeOut" class="weui_btn weui_btn_mini weui_btn_primary f-white">淡出 用于隐藏fadeOut</button>
- <button data-ani="pulse" class="weui_btn weui_btn_mini weui_btn_primary f-white">pulse</button>
- <button data-ani="rotateIn" class="weui_btn weui_btn_mini weui_btn_primary f-white">rotateIn</button>
- <button data-ani="slideIn" class="weui_btn weui_btn_mini weui_btn_primary f-white">slideIn</button>
- <button data-ani="slideOut" class="weui_btn weui_btn_mini weui_btn_primary f-white">slideOut</button>
- .weui-loading<span class="weui-loading"></span>
- </div>
- </body>
- </html>
|
