仿原生app，native特效

<!--定义容器，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>

$(".menuWap span").frRoute({
    baseUrl:"../js/main/",//定义引用js路径
    paths:[],//定义跳转页面需要用到的js文件名
    callBack:function(){

    },//在引入页面之后执行的js，也可以写到需引入的页面
    prevBtn:".backIco",//定义返回上级页面的按钮
    contain:".contain"//定义引入页面的容器
});

<div class="pad10">
    <p class="center font20 line24 top40"> 滴滴报价</p>

    <span class="btns btns-biggest btns-ye top40 backIco">返回</span>
</div>

/**
 * Created by wangmiao on 15-10-15.
 */
(function($){
    $.fn.frRoute = function(o){
        var defs = {
            baseUrl:"../js/main/",
            paths:[],
            callBack:function(){
                
            },
            prevBtn:".backIco",
            contain:".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>‘)
                }
            },
            action:function(actionPage,paths,callback){
                //创建容器
                frRoute = parseInt($(".fr-contain").last().attr("fr-route"))+1;
                console.log(frRoute)
                $("body").append(‘<div class="fr-contain" fr-route="‘+frRoute+‘" style="-webkit-transform:translate3d(‘+width+‘px,0,0);"></div>‘)
                var $currTar = $(".fr-contain[fr-route="+frRoute+"]");
                $currTar.load(actionPage,function(){
                    //划入当前页面
                    $currTar.css({"-webkit-transform":"translate3d(0,0,0)"})
                    //$(".fr-contain").scrollTop(0)
                    //引入js调用
                    if(opt.paths.length>0){
                        methods.addJs(opt.paths)
                    };
                    //回调函数
                    if(callback){callback()}
                })
            },
            backToprevPage:function(e){//返回上一个页面
                e.parents(".fr-contain").css({"-webkit-transform":"translate3d("+width+"px,0,0)"});
                setTimeout(function(){
                    e.parents(".fr-contain").remove();
                },100)
            },
            init:function(){//初始化
                obj.on("touchstart",function(){
                    var nextPage = $(this).attr("fr-href")
                    methods.action(nextPage,opt.paths,opt.callBack)
                });
                $(document).on("touchstart",".backIco",function(){
                    if($(".fr-contain").last().attr("fr-route")=="0"){
                        return;
                    }else{
                        methods.backToprevPage($(this))
                    }
                });
            }
        };
        methods.init()
    }
})(jQuery)