仿原生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)
追求原创特效