587 lines
23 KiB
JavaScript
587 lines
23 KiB
JavaScript
|
/*! Tdrag 0.0.1 */
|
|||
|
|
/**
|
|||
|
|
* Created by Tezml on 2016/5/26
|
|||
|
|
* You can modify my source code, if you have a good idea or a problem can be encountered by e-mail: tezml@tezml.com to find me.
|
|||
|
|
* 如果你想在项目中使用该插件，请不要删除该注释。
|
|||
|
|
*/
|
|||
|
|
;(function($,window,document,undefined){
|
|||
|
|
jQuery(function() {
|
|||
|
|
//插件制作
|
|||
|
|
|
|||
|
|
|
|||
|
|
$.fn.Tdrag = function (opt) {
|
|||
|
|
var call = {
|
|||
|
|
scope: null,//父级
|
|||
|
|
grid: null,//网格
|
|||
|
|
axis:"all",//上下或者左右
|
|||
|
|
pos:false,//是否记住位置
|
|||
|
|
handle:null,//手柄
|
|||
|
|
moveClass:"tezml",//移动时不换位加的class
|
|||
|
|
dragChange:false,//是否开启拖拽换位
|
|||
|
|
changeMode:"point",//point & sort
|
|||
|
|
cbStart:function(){},//移动前的回调函数
|
|||
|
|
cbMove:function(){},//移动中的回调函数
|
|||
|
|
cbEnd:function(){},//移动结束时候的回调函数
|
|||
|
|
random:false,//是否自动随机排序
|
|||
|
|
randomInput:null,//点击随机排序的按钮
|
|||
|
|
animation_options:{//运动时的参数
|
|||
|
|
duration:800,//每次运动的时间
|
|||
|
|
easing:"ease-out"//移动时的特效，ease-out、ease-in、linear
|
|||
|
|
},
|
|||
|
|
disable:false,//禁止拖拽
|
|||
|
|
disableInput:null//禁止拖拽的按钮
|
|||
|
|
};
|
|||
|
|
var dragfn = new Dragfn(this, opt);
|
|||
|
|
if (opt && $.isEmptyObject(opt) == false) {
|
|||
|
|
dragfn.options = $.extend(call, opt);
|
|||
|
|
} else {
|
|||
|
|
dragfn.options = call;
|
|||
|
|
}
|
|||
|
|
dragfn.firstRandom=true;
|
|||
|
|
var ele = dragfn.$element;
|
|||
|
|
dragfn.pack(ele,false);
|
|||
|
|
if(dragfn.options.randomInput!=null){
|
|||
|
|
$(dragfn.options.randomInput).bind("click",function(){
|
|||
|
|
dragfn.pack(ele,true);
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
//加载拓展jquery的函数
|
|||
|
|
dragfn.loadJqueryfn()
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
//依赖构造函数
|
|||
|
|
var Dragfn = function (ele, opt) {
|
|||
|
|
this.$element = ele;
|
|||
|
|
this.options = opt;
|
|||
|
|
};
|
|||
|
|
//构造函数方法
|
|||
|
|
Dragfn.prototype = {
|
|||
|
|
init: function (obj) {
|
|||
|
|
var self = this;
|
|||
|
|
self.ele=self.$element;
|
|||
|
|
self.handle=$(obj);//手柄
|
|||
|
|
self.options = self.options;
|
|||
|
|
self.disable = self.options.disable;
|
|||
|
|
self._start = false;
|
|||
|
|
self._move = false;
|
|||
|
|
self._end = false;
|
|||
|
|
self.disX = 0;
|
|||
|
|
self.disY = 0;
|
|||
|
|
self.zIndex=1000;
|
|||
|
|
self.moving=false;
|
|||
|
|
self.moves="";
|
|||
|
|
|
|||
|
|
|
|||
|
|
//父级
|
|||
|
|
self.box = $.type(self.options.scope)==="string" ? self.options.scope : null;
|
|||
|
|
//手柄
|
|||
|
|
if(self.options.handle!=null){
|
|||
|
|
self.handle=$(obj).find(self.options.handle);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//三个事件
|
|||
|
|
self.handle.on("mousedown", function (ev) {
|
|||
|
|
self.start(ev, obj);
|
|||
|
|
obj.setCapture && obj.setCapture();
|
|||
|
|
return false;
|
|||
|
|
});
|
|||
|
|
if(self.options.dragChange) {
|
|||
|
|
$(obj).on("mousemove", function (ev) {
|
|||
|
|
self.move(ev, obj);
|
|||
|
|
});
|
|||
|
|
$(obj).on("mouseup", function (ev) {
|
|||
|
|
self.end(ev, obj);
|
|||
|
|
});
|
|||
|
|
}else{
|
|||
|
|
$(document).on("mousemove", function (ev) {
|
|||
|
|
self.move(ev, obj);
|
|||
|
|
});
|
|||
|
|
$(document).on("mouseup", function (ev) {
|
|||
|
|
self.end(ev, obj);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
//jquery调取函数时候用
|
|||
|
|
loadJqueryfn: function(){
|
|||
|
|
var self=this;
|
|||
|
|
$.extend({
|
|||
|
|
//返回按照index排序的回调函数
|
|||
|
|
sortBox:function(obj){
|
|||
|
|
var arr=[];
|
|||
|
|
for (var s = 0; s < $(obj).length; s++) {
|
|||
|
|
arr.push($(obj).eq(s));
|
|||
|
|
}
|
|||
|
|
for ( var i = 0; i < arr.length; i++) {
|
|||
|
|
for ( var j = i + 1; j < arr.length; j++) {
|
|||
|
|
if(Number(arr[i].attr("index")) > Number(arr[j].attr("index"))){
|
|||
|
|
var temp = arr[i];
|
|||
|
|
arr[i] = arr[j];
|
|||
|
|
arr[j] = temp;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return arr
|
|||
|
|
},
|
|||
|
|
//随机排序函数
|
|||
|
|
randomfn:function(obj){
|
|||
|
|
self.pack($(obj),true);
|
|||
|
|
},
|
|||
|
|
//开启拖拽
|
|||
|
|
disable_open:function(){
|
|||
|
|
self.disable=false;
|
|||
|
|
},
|
|||
|
|
//禁止拖拽
|
|||
|
|
disable_cloose:function(){
|
|||
|
|
self.disable=true;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
toDisable: function(){
|
|||
|
|
var self=this;
|
|||
|
|
if(self.options.disableInput!=null){
|
|||
|
|
$(self.options.disableInput).bind("click",function(){
|
|||
|
|
if(self.disable==true){
|
|||
|
|
self.disable=false
|
|||
|
|
}else{
|
|||
|
|
self.disable=true
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
start: function (ev, obj) {
|
|||
|
|
var self = this;
|
|||
|
|
self.moved=obj;
|
|||
|
|
if (self.disable == true) {
|
|||
|
|
return false
|
|||
|
|
}
|
|||
|
|
self._start = true;
|
|||
|
|
var oEvent = ev || event;
|
|||
|
|
self.disX = oEvent.clientX - obj.offsetLeft;
|
|||
|
|
self.disY = oEvent.clientY - obj.offsetTop;
|
|||
|
|
$(obj).css("zIndex",self.zIndex++);
|
|||
|
|
self.options.cbStart();
|
|||
|
|
},
|
|||
|
|
move: function (ev, obj) {
|
|||
|
|
var self = this;
|
|||
|
|
if (self._start != true) {
|
|||
|
|
return false
|
|||
|
|
}
|
|||
|
|
if(obj!=self.moved){
|
|||
|
|
return false
|
|||
|
|
}
|
|||
|
|
self._move = true;
|
|||
|
|
var oEvent = ev || event;
|
|||
|
|
var l = oEvent.clientX - self.disX;
|
|||
|
|
var t = oEvent.clientY - self.disY;
|
|||
|
|
//有父级限制
|
|||
|
|
if (self.box != null) {
|
|||
|
|
var rule = self.collTestBox(obj,self.box);
|
|||
|
|
if (l > rule.lmax) {
|
|||
|
|
l = rule.lmax;
|
|||
|
|
} else if (l < rule.lmin) {
|
|||
|
|
l = rule.lmin;
|
|||
|
|
}
|
|||
|
|
if (t > rule.tmax) {
|
|||
|
|
t = rule.tmax;
|
|||
|
|
} else if (t < rule.tmin) {
|
|||
|
|
t = rule.tmin;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if(self.options.axis=="all"){
|
|||
|
|
obj.style.left = self.grid(obj, l, t).left + 'px';
|
|||
|
|
obj.style.top = self.grid(obj, l, t).top + 'px';
|
|||
|
|
}else if(self.options.axis=="y"){
|
|||
|
|
obj.style.top = self.grid(obj, l, t).top + 'px';
|
|||
|
|
}else if(self.options.axis=="x"){
|
|||
|
|
obj.style.left = self.grid(obj, l, t).left + 'px';
|
|||
|
|
}
|
|||
|
|
/* if(self.options.changeWhen=="move") {
|
|||
|
|
if (self.options.changeMode == "sort") {
|
|||
|
|
self.sortDrag(obj);
|
|||
|
|
} else if (self.options.changeMode == "point") {
|
|||
|
|
self.pointmoveDrag(obj);
|
|||
|
|
}
|
|||
|
|
}else{
|
|||
|
|
self.moveAddClass(obj);
|
|||
|
|
}*/
|
|||
|
|
if(self.options.pos==true){
|
|||
|
|
self.moveAddClass(obj);
|
|||
|
|
}
|
|||
|
|
self.options.cbMove(obj,self);
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
end: function (ev, obj) {
|
|||
|
|
var self = this;
|
|||
|
|
if (self._start != true) {
|
|||
|
|
return false
|
|||
|
|
}
|
|||
|
|
if(self.options.changeMode=="sort"&&self.options.pos==true){
|
|||
|
|
self.sortDrag(obj);
|
|||
|
|
}else if(self.options.changeMode=="point"&&self.options.pos==true){
|
|||
|
|
self.pointDrag(obj);
|
|||
|
|
}
|
|||
|
|
if(self.options.pos==true){
|
|||
|
|
self.animation(obj, self.aPos[$(obj).attr("index")]);
|
|||
|
|
}
|
|||
|
|
self.options.cbEnd();
|
|||
|
|
if(self.options.handle!=null){
|
|||
|
|
$(obj).find(self.options.handle).unbind("onmousemove");
|
|||
|
|
$(obj).find(self.options.handle).unbind("onmouseup");
|
|||
|
|
}else{
|
|||
|
|
$(obj).unbind("onmousemove");
|
|||
|
|
$(obj).unbind("onmouseup");
|
|||
|
|
}
|
|||
|
|
obj.releaseCapture && obj.releaseCapture();
|
|||
|
|
self._start = false;
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
//算父级的宽高
|
|||
|
|
collTestBox: function (obj, obj2) {
|
|||
|
|
var self = this;
|
|||
|
|
var l1 = 0;
|
|||
|
|
var t1 = 0;
|
|||
|
|
var l2 = $(obj2).innerWidth() - $(obj).outerWidth();
|
|||
|
|
var t2 = $(obj2).innerHeight() - $(obj).outerHeight();
|
|||
|
|
return {
|
|||
|
|
lmin: l1,//取的l最小值
|
|||
|
|
tmin: t1,//取的t最小值
|
|||
|
|
lmax: l2,//取的l最大值
|
|||
|
|
tmax: t2//取的t最大值
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
//算父级宽高时候干掉margin
|
|||
|
|
grid: function (obj, l, t) {//cur:[width,height]
|
|||
|
|
var self = this;
|
|||
|
|
var json = {
|
|||
|
|
left: l,
|
|||
|
|
top: t
|
|||
|
|
};
|
|||
|
|
if ($.isArray(self.options.grid) && self.options.grid.length == 2) {
|
|||
|
|
var gx = self.options.grid[0];
|
|||
|
|
var gy = self.options.grid[1];
|
|||
|
|
json.left = Math.floor((l + gx / 2) / gx) * gx;
|
|||
|
|
json.top = Math.floor((t + gy / 2) / gy) * gy;
|
|||
|
|
return json
|
|||
|
|
} else if (self.options.grid == null) {
|
|||
|
|
return json
|
|||
|
|
} else {
|
|||
|
|
console.log("grid参数传递格式错误");
|
|||
|
|
return false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
findNearest: function(obj){
|
|||
|
|
var self=this;
|
|||
|
|
var iMin=new Date().getTime();
|
|||
|
|
var iMinIndex=-1;
|
|||
|
|
var ele=self.ele;
|
|||
|
|
for(var i=0;i<ele.length;i++){
|
|||
|
|
if(obj==ele[i]){
|
|||
|
|
continue;
|
|||
|
|
}
|
|||
|
|
if(self.collTest(obj,ele[i])){
|
|||
|
|
var dis=self.getDis(obj,ele[i]);
|
|||
|
|
if(dis<iMin){
|
|||
|
|
iMin=dis;
|
|||
|
|
iMinIndex=i;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if(iMinIndex==-1){
|
|||
|
|
return null;
|
|||
|
|
}else{
|
|||
|
|
return ele[iMinIndex];
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
getDis: function(obj,obj2){
|
|||
|
|
var self=this;
|
|||
|
|
var l1=obj.offsetLeft+obj.offsetWidth/2;
|
|||
|
|
var l2=obj2.offsetLeft+obj2.offsetWidth/2;
|
|||
|
|
|
|||
|
|
var t1=obj.offsetTop+obj.offsetHeight/2;
|
|||
|
|
var t2=obj2.offsetTop+obj2.offsetHeight/2;
|
|||
|
|
|
|||
|
|
var a=l2-l1;
|
|||
|
|
var b=t1-t2;
|
|||
|
|
|
|||
|
|
return Math.sqrt(a*a+b*b);
|
|||
|
|
},
|
|||
|
|
collTest: function(obj,obj2){
|
|||
|
|
var self=this;
|
|||
|
|
var l1=obj.offsetLeft;
|
|||
|
|
var r1=obj.offsetLeft+obj.offsetWidth;
|
|||
|
|
var t1=obj.offsetTop;
|
|||
|
|
var b1=obj.offsetTop+obj.offsetHeight;
|
|||
|
|
|
|||
|
|
var l2=obj2.offsetLeft;
|
|||
|
|
var r2=obj2.offsetLeft+obj2.offsetWidth;
|
|||
|
|
var t2=obj2.offsetTop;
|
|||
|
|
var b2=obj2.offsetTop+obj2.offsetHeight;
|
|||
|
|
|
|||
|
|
if(r1<l2 || r2<l1 || t2>b1 || b2<t1){
|
|||
|
|
return false;
|
|||
|
|
}else{
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
//初始布局转换
|
|||
|
|
pack: function(ele,click){
|
|||
|
|
var self=this;
|
|||
|
|
self.toDisable();
|
|||
|
|
if(self.options.pos==false){
|
|||
|
|
for (var i = 0; i < ele.length; i++) {
|
|||
|
|
$(ele[i]).css("position", "absolute");
|
|||
|
|
$(ele[i]).css("margin", "0");
|
|||
|
|
self.init(ele[i]);
|
|||
|
|
}
|
|||
|
|
}else if(self.options.pos==true) {
|
|||
|
|
var arr = [];
|
|||
|
|
if (self.options.random || click) {
|
|||
|
|
while (arr.length < ele.length) {
|
|||
|
|
var n = self.rnd(0, ele.length);
|
|||
|
|
if (!self.finInArr(arr, n)) {//没找到
|
|||
|
|
arr.push(n);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (self.options.random == false || click != true) {
|
|||
|
|
var n = 0;
|
|||
|
|
while (arr.length < ele.length) {
|
|||
|
|
arr.push(n);
|
|||
|
|
n++
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//如果是第二次以后随机列表，那就重新排序后再随机，因为我智商不够使，不会排了
|
|||
|
|
if (self.firstRandom == false) {
|
|||
|
|
var sortarr = [];
|
|||
|
|
var n = 0;
|
|||
|
|
while (sortarr.length < ele.length) {
|
|||
|
|
sortarr.push(n);
|
|||
|
|
n++
|
|||
|
|
}
|
|||
|
|
for (var i = 0; i < ele.length; i++) {
|
|||
|
|
$(ele[i]).attr("index", sortarr[i]);
|
|||
|
|
$(ele[i]).css("left", self.aPos[sortarr[i]].left);
|
|||
|
|
$(ele[i]).css("top", self.aPos[sortarr[i]].top);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//布局转化
|
|||
|
|
self.aPos = [];
|
|||
|
|
if (self.firstRandom == false) {
|
|||
|
|
//不是第一次
|
|||
|
|
for (var j = 0; j < ele.length; j++) {
|
|||
|
|
self.aPos[j] = {
|
|||
|
|
left: ele[$(ele).eq(j).attr("index")].offsetLeft,
|
|||
|
|
top: ele[$(ele).eq(j).attr("index")].offsetTop
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
//第一次
|
|||
|
|
for (var j = 0; j < ele.length; j++) {
|
|||
|
|
self.aPos[j] = {left: ele[j].offsetLeft, top: ele[j].offsetTop};
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
//第二个循环布局转化
|
|||
|
|
for (var i = 0; i < ele.length; i++) {
|
|||
|
|
$(ele[i]).attr("index", arr[i]);
|
|||
|
|
$(ele[i]).css("left", self.aPos[arr[i]].left);
|
|||
|
|
$(ele[i]).css("top", self.aPos[arr[i]].top);
|
|||
|
|
$(ele[i]).css("position", "absolute");
|
|||
|
|
$(ele[i]).css("margin", "0");
|
|||
|
|
self.init(ele[i]);
|
|||
|
|
}
|
|||
|
|
self.firstRandom = false;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
//移动时候加class
|
|||
|
|
moveAddClass: function(obj){
|
|||
|
|
var self=this;
|
|||
|
|
var oNear=self.findNearest(obj);
|
|||
|
|
$(self.$element).removeClass(self.options.moveClass);
|
|||
|
|
if(oNear && $(oNear).hasClass(self.options.moveClass)==false){
|
|||
|
|
$(oNear).addClass(self.options.moveClass);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
//给li排序
|
|||
|
|
sort: function(){
|
|||
|
|
var self=this;
|
|||
|
|
var arr_li=[];
|
|||
|
|
for (var s = 0; s < self.$element.length; s++) {
|
|||
|
|
arr_li.push(self.$element[s]);
|
|||
|
|
}
|
|||
|
|
for ( var i = 0; i < arr_li.length; i++) {
|
|||
|
|
for ( var j = i + 1; j < arr_li.length; j++) {
|
|||
|
|
if(Number($(arr_li[i]).attr("index")) > Number($(arr_li[j]).attr("index"))){
|
|||
|
|
var temp = arr_li[i];
|
|||
|
|
arr_li[i] = arr_li[j];
|
|||
|
|
arr_li[j] = temp;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return arr_li;
|
|||
|
|
},
|
|||
|
|
//点对点的方式换位
|
|||
|
|
pointDrag: function(obj){
|
|||
|
|
var self=this;
|
|||
|
|
//先拍序
|
|||
|
|
var oNear=self.findNearest(obj);
|
|||
|
|
if (oNear) {
|
|||
|
|
self.animation(obj,self.aPos[$(oNear).attr("index")]);
|
|||
|
|
self.animation(oNear, self.aPos[$(obj).attr("index")]);
|
|||
|
|
var tmp;
|
|||
|
|
tmp = $(obj).attr("index");
|
|||
|
|
$(obj).attr("index", $(oNear).attr("index"));
|
|||
|
|
$(oNear).attr("index", tmp);
|
|||
|
|
$(oNear).removeClass(self.options.moveClass);
|
|||
|
|
} else if (self.options.changeWhen == "end") {
|
|||
|
|
self.animation(obj, self.aPos[$(obj).attr("index")]);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
//排序的方式换位
|
|||
|
|
sortDrag: function(obj){
|
|||
|
|
var self=this;
|
|||
|
|
//先拍序
|
|||
|
|
var arr_li=self.sort();
|
|||
|
|
//换位置
|
|||
|
|
var oNear=self.findNearest(obj);
|
|||
|
|
if(oNear){
|
|||
|
|
if(Number($(oNear).attr("index"))>Number($(obj).attr("index"))){
|
|||
|
|
//前换后
|
|||
|
|
var obj_tmp=Number($(obj).attr("index"));
|
|||
|
|
$(obj).attr("index",Number($(oNear).attr("index"))+1);
|
|||
|
|
for (var i = obj_tmp; i < Number($(oNear).attr("index"))+1; i++) {
|
|||
|
|
self.animation(arr_li[i],self.aPos[i-1]);
|
|||
|
|
self.animation(obj,self.aPos[$(oNear).attr("index")]);
|
|||
|
|
$(arr_li[i]).removeClass(self.options.moveClass);
|
|||
|
|
$(arr_li[i]).attr("index",Number($(arr_li[i]).attr("index"))-1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}else if(Number($(obj).attr("index"))>Number($(oNear).attr("index"))){
|
|||
|
|
//后换前
|
|||
|
|
var obj_tmp=Number($(obj).attr("index"));
|
|||
|
|
$(obj).attr("index",$(oNear).attr("index"));
|
|||
|
|
for (var i = Number($(oNear).attr("index")); i < obj_tmp; i++) {
|
|||
|
|
self.animation(arr_li[i],self.aPos[i+1]);
|
|||
|
|
self.animation(obj,self.aPos[Number($(obj).attr("index"))]);
|
|||
|
|
$(arr_li[i]).removeClass(self.options.moveClass);
|
|||
|
|
$(arr_li[i]).attr("index",Number($(arr_li[i]).attr("index"))+1);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}else{
|
|||
|
|
self.animation(obj,self.aPos[$(obj).attr("index")]);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
//运动函数(后期再加参数)
|
|||
|
|
animation: function(obj,json){
|
|||
|
|
var self=this;
|
|||
|
|
//考虑默认值
|
|||
|
|
var options=self.options.animation_options; /*|| {};
|
|||
|
|
options.duration=self.options.animation_options.duration || 800;
|
|||
|
|
options.easing=options.easing.duration.easing || 'ease-out';*/
|
|||
|
|
var self=this;
|
|||
|
|
var count=Math.round(options.duration/30);
|
|||
|
|
var start={};
|
|||
|
|
var dis={};
|
|||
|
|
for(var name in json){
|
|||
|
|
start[name]=parseFloat(self.getStyle(obj,name));
|
|||
|
|
if(isNaN(start[name])){
|
|||
|
|
switch(name){
|
|||
|
|
case 'left':
|
|||
|
|
start[name]=obj.offsetLeft;
|
|||
|
|
break;
|
|||
|
|
case 'top':
|
|||
|
|
start[name]=obj.offsetTop;
|
|||
|
|
break;
|
|||
|
|
case 'width':
|
|||
|
|
start[name]=obj.offsetWidth;
|
|||
|
|
break;
|
|||
|
|
case 'height':
|
|||
|
|
start[name]=obj.offsetHeight;
|
|||
|
|
break;
|
|||
|
|
case 'marginLeft':
|
|||
|
|
start[name]=obj.offsetLeft;
|
|||
|
|
break;
|
|||
|
|
case 'borderWidth':
|
|||
|
|
start[name]=0;
|
|||
|
|
break;
|
|||
|
|
//...
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
dis[name]=json[name]-start[name];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var n=0;
|
|||
|
|
|
|||
|
|
clearInterval(obj.timer);
|
|||
|
|
obj.timer=setInterval(function(){
|
|||
|
|
n++;
|
|||
|
|
for(var name in json){
|
|||
|
|
switch(options.easing){
|
|||
|
|
case 'linear':
|
|||
|
|
var a=n/count;
|
|||
|
|
var cur=start[name]+dis[name]*a;
|
|||
|
|
break;
|
|||
|
|
case 'ease-in':
|
|||
|
|
var a=n/count;
|
|||
|
|
var cur=start[name]+dis[name]*a*a*a;
|
|||
|
|
break;
|
|||
|
|
case 'ease-out':
|
|||
|
|
var a=1-n/count;
|
|||
|
|
var cur=start[name]+dis[name]*(1-a*a*a);
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if(name=='opacity'){
|
|||
|
|
obj.style.opacity=cur;
|
|||
|
|
obj.style.filter='alpha(opacity:'+cur*100+')';
|
|||
|
|
}else{
|
|||
|
|
obj.style[name]=cur+'px';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if(n==count){
|
|||
|
|
clearInterval(obj.timer);
|
|||
|
|
options.complete && options.complete();
|
|||
|
|
}
|
|||
|
|
},30);
|
|||
|
|
},
|
|||
|
|
getStyle: function(obj,name){
|
|||
|
|
return (obj.currentStyle || getComputedStyle(obj,false))[name];
|
|||
|
|
},
|
|||
|
|
//随机数
|
|||
|
|
rnd: function(n,m){
|
|||
|
|
return parseInt(Math.random()*(m-n)+n);
|
|||
|
|
},
|
|||
|
|
//在数组中找
|
|||
|
|
finInArr: function(arr,n){
|
|||
|
|
for(var i = 0 ; i < arr.length; i++){
|
|||
|
|
if(arr[i] == n){//存在
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
})(jQuery,window,document);
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|