jquery滑动效果的运动模块封装
程序员文章站
2022-04-15 14:43:21
效果图 move.html move
效果图
move.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>move</title>
<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
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
move.js
(function($){
"use strict";
var transition=window.mt.transition;//transitionend
var issupport=window.mt.issupport;//true
var 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;
}
// silent
var 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);
}
//css3
var 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);
}
//js
var 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 animation
mode=new css3(elem);
}else if(options.js){
//js animation
mode=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 y
if(typeof mode[opt]==="function"){
mode[opt](x,y);
}
});
}
})
})(jquery);