標籤：
//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>
移動端 頁面切換方案
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
