仿原生app,native特效
为解决手机端wap项目中页面跳转响应慢的问题,基于jquery开发了fr.routeApp.js,使得wap项目拥有原生app的流畅,跳转时亦有native的特效
html部分
<!--定义容器,class="fr-contain" ,初始化路由ID为0,fr-route="0"设置请求页面地址,fr-href="ddbj/index.html" -->
<div class="fr-contain" fr-route="0">
<div class="center menuWap">
<span class="btns btns-big btns-green" fr-href="ddbj/index.html">滴滴报价</span>
<span class="btns btns-big btns-green" fr-href="fls/index.html">福利社</span>
<span class="btns btns-big btns-green" fr-href="gcal/index.html">工程案例</span>
<span class="btns btns-big btns-green" fr-href="zgz/index.html">找工长</span>
<span class="btns btns-big btns-green" fr-href="fwlc/index.html">服务流程</span>
<span class="btns btns-big btns-green" fr-href="ssxy/index.html">舒适学院</span>
<span class="btns btns-big btns-green" fr-href="xxtyd/index.html">线下体验店</span>
<span class="btns btns-big btns-green" fr-href="mfsj/index.html">免费设计</span>
</div>
</div>
引用js部分
$(".menuWap span").frRoute({
baseUrl:"../js/main/",//定义引用js路径,默认../js/main/
paths:[],//定义跳转页面需要用到的js文件名
action:"touchstart",//触发类型,目前有click,touchstart,默认touchstart
type:"slide",//展示类型,目前有slide,fade,auto,默认slide
callBack:function(){},//在引入页面之后执行的js,也可以写到需引入的页面
prevBtn:".fr-back",//定义返回上级页面的按钮默认.backIco
contain:".fr-contain"//定义引入页面的容器,默认.fr-contain
});
引入的html页面,html页面只需要代码部分,无需头和尾
<div class="pad10">
<p class="center font20 line24 top40"> 滴滴报价</p> <span class="btns btns-biggest btns-ye top40 backIco">返回</span>
</div>
fr.routeApp-1.3.js
/**
* Created by wangmiao on 15-10-15.
*/
(function($){
$.fn.frRoute = function(o){
var defs = {
baseUrl:"../js/main/",
paths:[],
action:"touchstart",
type:"slide",
callBack:function(){ },
prevBtn:".fr-back",
contain:".fr-contain"
};
var obj = this;
var opt = $.fn.extend({},defs,o);
var width = $(window).width();
var frRoute = 0;
var methods = {
addJs:function(e){//引入js
for(i=0;i<e.length;i++){
$("body").append('<script type="text/javascript" src="'+opt.baseUrl+''+e[i]+'.js"></script>')
}
},
addCss:function(){
$("body").before('<style>'+opt.contain+'{position:fixed; top:0; left:0; width:100%;-webkit-transition:all .3s ease-out; height:100%; overflow:auto;}</style>');
},
action:function(actionPage,paths,callback){
//创建容器
frRoute = parseInt($(opt.contain).last().attr("fr-route"))+1;
if(opt.type=="slide"){
$("body").append('<div class="'+opt.contain.substr(1)+'" fr-route="'+frRoute+'" style="-webkit-transform:translate3d('+width+'px,0,0);"></div>')
}else if(opt.type=="fade"){
$("body").append('<div class="'+opt.contain.substr(1)+'" fr-route="'+frRoute+'" style="-webkit-transform:scale(0)"></div>')
}else if(opt.type=="auto"){
$("body").append('<div class="'+opt.contain.substr(1)+'" fr-route="'+frRoute+'"></div>')
}
var $currTar = $(opt.contain+"[fr-route="+frRoute+"]");
$currTar.load(actionPage,function(){
//划入当前页面
if(opt.type=="slide"){
$currTar.css({"-webkit-transform":"translate3d(0,0,0)"})
}else if(opt.type=="fade"){
$currTar.css({"-webkit-transform":"scale(1)"})
};
//引入js调用
if(opt.paths.length>0){
methods.addJs(opt.paths)
};
//回调函数
if(callback){callback()}
})
},
backToprevPage:function(e){//返回上一个页面
if(opt.type=="slide"){
e.parents(opt.contain).css({"-webkit-transform":"translate3d("+width+"px,0,0)"});
}else if(opt.type=="fade"){
e.parents(opt.contain).css({"-webkit-transform":"scale(0)"});
};
setTimeout(function(){
e.parents(opt.contain).remove();
},100)
},
init:function(){//初始化
methods.addCss();
obj.on(opt.action,function(){
var nextPage = $(this).attr("fr-href")
methods.action(nextPage,opt.paths,opt.callBack)
});
$(document).on(opt.action,opt.prevBtn,function(){
if($(opt.contain).last().attr("fr-route")=="0"){
return;
}else{
methods.backToprevPage($(this))
}
});
}
};
methods.init()
}
})(jQuery)
仿原生app,native特效的更多相关文章
- 关于原生app、webApp、混合app的介绍
WebApp 原生App(Native App) 混合App(hybrid App) webApp: 用html5,css3 js开发的网页,运行在移动端的浏览器 zepto.angular.vue. ...
- 关于OAuth2.0 Authorization Code + PKCE flow在原生客户端(Native App)下集成的一点思考
写在前面 前几天看了园友的一篇文章被广泛使用的OAuth2.0的密码模式已经废了,放弃吧 被再次提起: Implicit Flow Password Grant,均已被标记为Legacy,且OAuth ...
- H5、原生app、混合开发三者比较
一.概念 a) H5:即Html5,接触过互联网的都知道html,所以很明显h5是html的第5次重大修改的一项超文本标记语言的标准协议. b) 原生:使用原生制作APP(Native app),即在 ...
- Do带你解析:原生APP与web APP的区别
对于DeviceOne原生跨平台APP与WEB APP的区别,很多人还不是很清楚,下面就让小编来简单介绍DeviceOne原生APP的功能以及与WEB APP的区别. 定义,什么是原生APP和web ...
- NativeScript - JS 构建跨平台的原生 APP
使用 NativeScript,你可以用现有的 JavaScript 和 CSS 技术来编写 iOS.Android 和 Windows Phone 原生移动应用程序.由原生平台的呈现引擎呈现界面而不 ...
- 原生app,WEBAPP,混合app
什么叫做原生App? 原生App是专门针对某一类移动设备而生的,它们都是被直接安装到设备里,而用户一般也是通过网络商店或者卖场来获取例如 The App Store 与 Android Ap ...
- 原生app与WebApp的区别
Native App开发Native App开发即我们所称的传统APP开发模式(原生APP开发模式),该开发针对IOS.Android等不同的手机操作系统要采用不同的语言和框架进行开发,该模式通常是由 ...
- RN与现有的原生app集成
https://facebook.github.io/react-native/docs/integration-with-existing-apps.html RN可以很好地支持往一个原生的app上 ...
- webAPP 原生APP 对比
Web App即是一种框架型APP开发模式(HTML5 APP 框架开发模式),该开发具有跨平台的优势,该模式通常由“HTML5云网站+APP应用客户端”两部份构成,APP应用客户端只需安装应用的框架 ...
随机推荐
- MySQL中进行模糊搜索的一些问题
在搜索数据库中的数据时,SQL 通配符可以替代一个或多个字符.SQL 通配符必须与 LIKE 运算符一起使用.在 SQL 中,可使用以下通配符:通配符 描述 % 替代一个或多个字符 ...
- Javascript实现格式化输出
前两天看面试题,其中有一道要实现js的格式化输出,具体给出的是: Javascript实现格式化输出,比如输入999999999,输出为999,999,999 我的实现方式是 function for ...
- AMD and CMD are dead之KMD.js之懒
缘由 "懒"在软件设计中,有着重大的意义.最常见的两种"懒",便是: 懒得计算 懒得加载 "懒得计算"常见于服务器端: 比如Multipla ...
- UIPickerView的使用(一)
简介:UIPickerView是一个选择器控件,它比UIDatePicker更加通用,它可以生成单列的选择器,也可生成多列的选择器,而且开发者完全可以自定义选择项的外观,因此用法非常灵活.UIPick ...
- Linux学习心得之 Linux下命令行Android开发环境的搭建
作者:枫雪庭 出处:http://www.cnblogs.com/FengXueTing-px/ 欢迎转载 Linux学习心得之 Linux下命令行Android开发环境的搭建 1. 前言2. Jav ...
- 玩转大麦盒子airplay
长城宽待送了大麦盒子,一直没怎么用,既然是安卓的系统,那估计可以安装很多的软件吧,今天演练了一下. 大麦盒子 规格和介绍 http://baike.so.com/doc/7487612.html 有G ...
- iOS - 详细理解KVC与KVO
详细理解KVC与KVO 在面试的时候,KVC与KVO有些时候还是会问到的,并且他们都是Objective C的关键概念,在这里我们先做一个简单地介绍: (一)KVC: KVC即指:NSKeyValue ...
- iOS证书和描述文件
iOS有两种证书和描述文件: 证书类型 使用场景 开发(Development)证书和描述文件 用于开发测试,在HBuilder中打包后可在真机环境通过Safari调试 发布(Distribution ...
- 解决:eclipse删除工程会弹出一个对话框提示“[project_name]”contains resources that are not in sync with"[workspace_name...\xx\..xx\..\xx]"
提示“[project_name]”contains resources that are not in sync with"[workspace_name...\xx\..xx\..\xx ...
- GIT命令行的使用
新手了解 有不对的地方指点下 首先, 了解下什么是GIT,GIT是一款开元的分布式版本控制工具, 在世界上的所有分布式版本控制工具中,GIT是最简单,最流行,同时也是最常用的 相比于其他版本的控制工具 ...