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

效果图

move.html

<!DOCTYPE html>
<html lang="en"head>
    meta charset="UTF-8"title>move</link rel="stylesheet" href="../css/base.css"="../css/move.css"bodydiv class="slider">
        ="box" id="box"></div="box2"button ="btn back fl">&lt;button><="btn forw fl"&gt;>

    script src="../js/jquery.js"script="../js/transition.js"="../js/move.js">
        var box=$("#box),box2#box2.back.forw);

        //接收消息
        box.on(move moved,function(e,elem){
            console.log(e.type);
            console.log(elem);
        })
        box.move({
            css3:true
        });
        box2.move({
            css3:
        });
        forw.on(click(){
            box.move(x-200);
            box2.move(0);
        });
        back.on();
        });
    html>

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

move.css

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

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

move.js

(function($){

    "use strict";

    var transition=window.mt.transition;//transitionend
    var isSupport=window.mt.isSupport;true

    var init=(elem){
        this.elem=elem;
        this.curX=parseFloat(this.elem.css("left"));
        this.curY=parseFloat(this.elem.css("top"));
    }
    var to=(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]);发送开始运动的消息，并传递运动的元素
        typeof callback==="function") callback();

        this.curX=x;
        this.curY=y;
    }

 silent
    var silent= call的作用主要是为了改变this指向
         不加call,直接调用init函数， 那么的this指向了init
         添加call,让init函数的this指向Silent对象
        init.call(thisthis.elem.removeClass("transition");确保没有动画效果，写在构造函数里面只会执行一次
    }
    silent.prototype.to=var self=this;改变函数内部this指向为当前对象

        to.call(this,x,(){
            self.elem.css({
                left:x,top:y
            });
            self.elem.trigger("moved",[self.elem]);发送结束运动的消息
        });
    }
    silent.prototype.x=(x){
        .to(x);
    }
    silent.prototype.y=(y){
        this.to(nullcss3
    var css3=(elem){
        init.call(this.elem.addClass("transition");

        设置top和left，避免因css中没有设置造成动画失效
        .elem.css({
            left:.curX,top:.curY
        });
    }
    css3.prototype.to=(){
            self.elem.off(transition).one(transition,(){
                self.elem.trigger("moved".to(x);
    }
    css3.prototype.y=js
    var js=transition会导致js动画失效
    }
    js.prototype.to=(){
            self.elem.stop().animate({
                left:x,top:y
            },1)">function(){这里的回调代表动画结束执行
                self.elem.trigger("moved".to(x);
    }
    js.prototype.y=默认参数
    var defaults={
        css3:false
    }

实例化
    var move=(elem,options){
        var mode=if(options.css3 && isSupport){
            css3 animation
            mode=new css3(elem);
        }else if(options.js){
            js animation
            mode= js(elem);
        }else{
            mode= silent(elem);
        }

         {
            to:$.proxy(mode.to,mode),1)">this指向为mode
            x:$.proxy(mode.x,y:$.proxy(mode.y,mode)
        }
    }

注册插件
    $.fn.extend({
        move:(opt,y){
            return this可以返回对象，方便连写
            return this.each((){
                var ui=$();
                var mode=ui.data("move"opt是参数对象
                var options=$.extend({},defaults,1)">typeof opt==="object"&&opt);
                
                单例：一个DOM元素对应一个实例，如果已经存在则不需要反复实例化
                if(!mode){
                    mode=move(ui,options);
                    ui.data("move"opt是to x y
                typeof mode[opt]==="function"){
                    mode[opt](x,y);
                }
            });
        }
    })

})(jQuery);

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

相关文章