草稿

最新推荐文章于 2021-01-25 14:29:26 发布

原创最新推荐文章于 2021-01-25 14:29:26 发布 · 322 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#iframe #div #function #url #null #border

javascript 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的平滑页面切换效果的方法，包括页面元素的初始化设置及不同方向（左右）的平滑过渡动画。通过自定义配置项如步进时间和步进像素等参数来调整动画细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

MyJs.Apple={
    div1:null,
    div2:null,
    div3:null,
    iframe1:null,
    iframe2:null,
    iSpeed:4,//步进时间 单位毫秒
    iLenth:30,//步进像素
    _intervalID:null,
    //js页面跳转 
    //  _url：网址
    //  _config:{
    //      type:slide //类型 slide平滑(默认)
    //      dir:right //方向 left往左(默认) right往右
    //  }
    goToUrl:function(_url,_config){
        var op = $.Object.extend({
            type: "slide",
            dir: "left"
        }, _config || {});
        switch(op.type){
            default:{
                if(op.dir=="left"){
                    if(this.div1.left()==0){
                        this.iframe2.attr("src",_url);
                    }else{
                        this.iframe1.attr("src",_url);
                    }
                    this._intervalID = this.slideLeft.interval(this.iSpeed);
                }
                if(op.dir=="right"){
                    if(this.div1.left()==0){
                        this.div2.left(this.div3.width()*-1);
                        this.iframe2.attr("src",_url);
                    }else{
                        this.div1.left(this.div3.width()*-1);
                        this.iframe1.attr("src",_url);
                    }
                    this._intervalID = this.slideRight.interval(this.iSpeed);
                }
            }
        }
    },
    slideRight:function(){
        var o = MyJs.Apple;
        var _oTmpA=o.div1;
        var _oTmpB=o.div2;
        if(o.div2.left()>o.div1.left()){
            _oTmpA=o.div2;
            _oTmpB=o.div1;
        }
        _oTmpA.left(_oTmpA.left() + o.iLenth);
        _oTmpB.left(_oTmpB.left() + o.iLenth);
        if(_oTmpA.left()>o.div3.width()){
            _oTmpA.left(o.div3.width());
            _oTmpB.left(0);
            clearInterval(o._intervalID)
        }
    },
    slideLeft:function(){
        var o = MyJs.Apple;
        var _oTmpA=o.div1;
        var _oTmpB=o.div2;
        if(o.div2.left()<o.div1.left()){
            _oTmpA=o.div2;
            _oTmpB=o.div1;
        }
        _oTmpB.left(_oTmpB.left() - o.iLenth);
        _oTmpA.left(_oTmpA.left() - o.iLenth);
        if(_oTmpB.left()<1){
            _oTmpA.left(o.div3.width());
            _oTmpB.left(0);
            clearInterval(o._intervalID)
        }
    },
    init:function(_url){//debugger;
        var divStyle="position:absolute; top:0; left:0; width:100%; height:100%; background:#fff;overflow: hidden;";//border:solid 1px #f00;
        var div1=$.createElement("div",{"style":divStyle});
        var div2=$.createElement("div",{"style":divStyle});
        var div3=$.createElement("div",{"style":divStyle});
        var framStyle="height:100%;width:100%;border:0px;";
        var iframe1=$.createElement("iframe",{"style":framStyle,"scrolling":"no","frameborder":"0"});
        var iframe2=$.createElement("iframe",{"style":framStyle,"scrolling":"no","frameborder":"0"});
        div3.append(div1,div2);
        document.body.appendChild(div3[0]);
        div1.append(iframe1);
        div2.append(iframe2);
        div2.css("left",div1.width());
        iframe1.attr("src",_url);        
        this.div1 = div1;
        this.div2 = div2;
        this.div3 = div3;
        this.iframe1 = iframe1;
        this.iframe2 = iframe2;
    }
};