关于我们

质量为本、客户为根、勇于拼搏、务实创新

< 返回新闻公共列表

jquery滑动效果的运动模块封装

发布时间:2020-02-29 00:00:00

效果图

move.html

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>movetitle><link rel="stylesheet" href="../css/base.css"><link rel="stylesheet" href="../css/move.css">head><body><div class="slider"><div class="box" id="box">div><div class="box" id="box2">div>div><button class="btn back fl"><button><button class="btn forw fl">>button><script src="../js/jquery.js">script><script src="../js/transition.js">script><script src="../js/move.js">script><script>var box=$("#box"),
            box2=$("#box2"),
            back=$(".back"),
            forw=$(".forw");//接收消息        box.on("move moved",function(e,elem){
            console.log(e.type);
            console.log(elem);
        })
        box.move({
            css3:true,
            js:true});
        box2.move({
            css3:true,
            js:true});
        forw.on("click",function(){
            box.move("x",-200);
            box2.move("x",0);
        });
        back.on("click",function(){
            box.move("x",0);
            box2.move("x",200);
        });script>body>html>

base.css https://www.cnblogs.com/chenyingying0/p/12363689.html

move.css

    /*提取出过渡样式,可公用*/.transition{-webkit-transition:all .5s;-moz-transition:all .5s;-ms-transition:all .5s;-o-transition:all .5s;transition:all .5s;
    }.box{position: absolute;width:200px;height:100px;background-color: pink;top:0;left:0;
    }.btn{width:100px;height:20px;
        
    }.back{margin-left:100px;
    }#box2{left:100%;/*父容器宽度*/background-color:#abcdef;
    }.slider{position: relative;width:200px;height:100px;border:2px solid #ccc;margin-left:100px;overflow:hidden;
    }

transition.js https://www.cnblogs.com/chenyingying0/p/12363649.html

move.js

(function($){"use strict";var transition=window.mt.transition;//transitionendvar isSupport=window.mt.isSupport;//truevar init=function(elem){this.elem=elem;this.curX=parseFloat(this.elem.css("left"));this.curY=parseFloat(this.elem.css("top"));
    }var to=function(x,y,callback){
        x=(typeof x==="number"?x:this.curX);//x如果不是数字,则只对y轴操作y=(typeof y==="number"?y:this.curY);//y如果不是数字,则只对x轴操作if(this.curX===x && this.curY===y) return;//已经到达目的地,避免重复执行this.elem.trigger("move",[this.elem]);//发送开始运动的消息,并传递运动的元素if(typeof callback==="function") callback();this.curX=x;this.curY=y;
    }// silentvar silent=function(elem){// call的作用主要是为了改变this指向// 不加call, 直接调用init函数, 那么的this指向了init// 添加call, 让init函数的this指向Silent对象init.call(this,elem);this.elem.removeClass("transition");//确保没有动画效果,写在构造函数里面只会执行一次    }
    silent.prototype.to=function(x,y){var self=this;//改变函数内部this指向为当前对象to.call(this,x,y,function(){
            self.elem.css({
                left:x,
                top:y
            });
            self.elem.trigger("moved",[self.elem]);//发送结束运动的消息        });
    }
    silent.prototype.x=function(x){this.to(x);
    }
    silent.prototype.y=function(y){this.to(null,y);
    }//css3var css3=function(elem){
        init.call(this,elem);this.elem.addClass("transition");//设置top和left,避免因css中没有设置造成动画失效this.elem.css({
            left:this.curX,
            top:this.curY
        });
    }
    css3.prototype.to=function(x,y){var self=this;//改变函数内部this指向为当前对象to.call(this,x,y,function(){
            self.elem.off(transition).one(transition,function(){
                self.elem.trigger("moved",[self.elem]);
            });

            self.elem.css({
                left:x,
                top:y
            })
        });

    }
    css3.prototype.x=function(x){this.to(x);
    }
    css3.prototype.y=function(y){this.to(null,y);
    }//jsvar js=function(elem){
        init.call(this,elem);this.elem.removeClass("transition");//transition会导致js动画失效    }
    js.prototype.to=function(x,y){var self=this;//改变函数内部this指向为当前对象to.call(this,x,y,function(){
            self.elem.stop().animate({
                left:x,
                top:y
            },function(){//这里的回调代表动画结束执行self.elem.trigger("moved",[self.elem]);
            });
        });
    }
    js.prototype.x=function(x){this.to(x);
    }
    js.prototype.y=function(y){this.to(null,y);
    }//默认参数var defaults={
        css3:false,
        js:false}//实例化var move=function(elem,options){var mode=null;if(options.css3 && isSupport){//css3 animationmode=new css3(elem);
        }else if(options.js){//js animationmode=new js(elem);
        }else{
            mode=new silent(elem);
        }return {
            to:$.proxy(mode.to,mode),//this指向为mode            x:$.proxy(mode.x,mode),
            y:$.proxy(mode.y,mode)
        }
    }//注册插件    $.fn.extend({
        move:function(opt,x,y){//return this可以返回对象,方便连写return this.each(function(){var ui=$(this);var mode=ui.data("move");//opt是参数对象var options=$.extend({},defaults,typeof opt==="object"&&opt);                //单例:一个DOM元素对应一个实例,如果已经存在则不需要反复实例化if(!mode){
                    mode=move(ui,options);
                    ui.data("move",mode);
                }                //opt是to x yif(typeof mode[opt]==="function"){
                    mode[opt](x,y);
                }
            });
        }
    })

})(jQuery);

 


/template/Home/Zkeys/PC/Static