标签：
//css
.onpage {position:fixed;position:absolute; left:0; top:0; width:100%; height:100%; background:#fff; z-index:10000; -webkit-transform: translate3d(100%, 0px, 0px); -webkit-transition: -webkit-transform 400ms cubic-bezier(0.42, 0, 0.58, 1) 0.1s;-moz-transition: -webkit-transform 400ms cubic-bezier(0.42, 0, 0.58, 1) 0.1s; transition: -webkit-transform 400ms cubic-bezier(0.42, 0, 0.58, 1) 0.1s;}
.onpage.bgno { background:#EAEAEA; }
.pgl0 {transform: translate3d(0px, 0px, 0px);-moz-transform: translate3d(0px, 0px, 0px); -webkit-transform: translate3d(0px, 0px, 0px);-webkit-transition: -webkit-transform 400ms cubic-bezier(0.42, 0, 0.58, 1) 0.1s;-moz-transition: -webkit-transform 400ms cubic-bezier(0.42, 0, 0.58, 1) 0.1s; transition: -webkit-transform 400ms cubic-bezier(0.42, 0, 0.58, 1) 0.1s;}
.pgl100 {-webkit-transform: translate3d(100%, 0px, 0px);-moz-transform: translate3d(100%, 0px, 0px);transform: translate3d(100%, 0px, 0px);-moz-transition: -webkit-transform 400ms cubic-bezier(0.42, 0, 0.58, 1) 0.1s;-webkit-transition: -webkit-transform 400ms cubic-bezier(0.42, 0, 0.58, 1) 0.1s;transition: -webkit-transform 400ms cubic-bezier(0.42, 0, 0.58, 1) 0.1s;}
//html:
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <title>我的资料</title> <link href="../css/base.css" rel="stylesheet" type="text/css"> <link href="../css/my.css" rel="stylesheet" type="text/css"> <script src="../js/jquery-1.11.1.min.js" type="text/javascript"></script> <script type="text/javascript" src="../js/iscroll.js"></script> <script type="text/javascript" src="../js/base.js"></script> </head> <body> <header class="header"> <div class="top"> <a href="javascript:history.back()" class="back"></a> <h1 class="title">关于我们</h1> </div> </header> <section id="wrapper" class="bot0"> <div id="scroller"> <div class="mylogo"> <img src="../images/mylogo.png" /> <p class="center">abc</p> </div> <div class="my about pd10"> <section class="myModule"> <ul class="ilist"> <li><a href="#" class="react" data-role="show-sys">系统简介</a></li> </ul> </section> <section class="myModule"> <ul class="ilist"> <li><a href="#" class="react" data-role="show-ver">版本说明</a></li> <li><a href="#" class="react" data-role="show-ser">服务条款</a></li> <li><a href="#" class="react" data-role="show-acc">官方账号</a></li> <li><a href="http://www.baidu.com.com" target="_blank" class="react">官方系统 <span class="blue f12 mgl20">sadfasdf</span></a></li> </ul> </section> <section class="myModule"> <ul class="ilist itel"> <li><a href="#" class="react">客服热线 <span class="blue f12 mgl20">12345678</span></a></li> </ul> </section> <div class="center mgt20 mgb20 f12"> <p>abcdd</p> <p>版权所有2005-2015</p> </div> </div> </div> </section> <div id="ourabout" class="onpage"> <header class="header"> <div class="top"> <a href="javascript:;" data-role="hideabout" class="back"></a> <h1 class="title js-title">系统简介</h1> </div> </header> <div id="aboutwraper" class="normal bot0"> <div id="aboutscroller"> <div class="text js-text"> </div> </div> </div> </div> <!--系统简介--> <div id="sys" style="display:none;"> <p class="txttop">一、系统概述</p> <p>阿百川的。</p> </div> <!--版本更新--> <div id="ver" style="display:none;"> <div class="txttop"> 要更新</div> <p class="txttop">一、系统概述</p> <p>阿百川的。</p> </div> <!--服务条款--> <div id="ser" style="display:none;"> asdfasdfasdf </div> <div id="acc" style="display:none;"> <div class="my about noarr pd10"> <section class="myModule"> <ul class="ilist"> <li><a href="javascript:;" class="react">微信订阅号 <span class="blue f12 mgl20">abcd</span></a></li> <li><a href="javascript:;" class="react">微信服务号 <span class="blue f12 mgl20">efdd</span></a></li> </ul> </section> </div> </div> <script> $(function(){ var cfb=null; $(".itel>li").on("click",function(){ cfb = new ConfirmBox({ title:‘400-010-7878‘, callback:function(){ window.location.href="tel:"+this.title; }, btnOk:"拨号" }); cfb.boxOpen(); }); //加载内容 cnapp.about = {}||cnapp.about; cnapp.about.load=function(){ var myAbout=null; myAbout = new IScroll(‘#aboutwraper‘, { mouseWheel: true}); if($("#aboutwraper").length >0) { $("a[data-role*=‘show‘]").click(function(){ var $this = $(this); var strRole = $this.attr("data-role").split("-")[1]; var strTit = $this.text(); $(".js-title").html(strTit) $(".js-text").html($("#"+strRole).html()); myAbout.scrollTo(0,0,200) $("#ourabout").addClass("pgl0"); myAbout.refresh(); }); $("[data-role=‘hideabout‘]").click(function(){ $("#ourabout").removeClass("pgl0") }); } }; cnapp.about.load(); }); </script> </body> </html>
标签：
原文地址：http://www.cnblogs.com/skmtpsh/p/4633888.html
