JavaScript滑移效果代码

代码：

js滑移效果

var $ = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
};

function Event(e){
var oEvent = document.all ? window.event : e;
if (document.all) {
oEvent.pageX = oEvent.clientX + document.documentElement.scrollLeft;
oEvent.pageY = oEvent.clientY + document.documentElement.scrollTop;
}
return oEvent;
}

function addEventHandler(oTarget, sEventType, fnHandler) {
if (oTarget.addEventListener) {
oTarget.addEventListener(sEventType, fnHandler, false);
} else if (oTarget.attachEvent) {
oTarget.attachEvent("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = fnHandler;
}
};

function removeEventHandler(oTarget, sEventType, fnHandler) {
if (oTarget.removeEventListener) {
oTarget.removeEventListener(sEventType, fnHandler, false);
} else if (oTarget.detachEvent) {
oTarget.detachEvent("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = null;
}
};

var Class = {
create: function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}

Object.extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
return destination;
}

var Slippage = Class.create();
Slippage.prototype = {
initialize: function(obj, options) {

this.obj = $(obj);
this._timer =null;
this._xs = this._ys = [];
this.X = parseInt(this.obj.style.left) || 0;
this.Y = parseInt(this.obj.style.top) || 0;

this.SetOptions(options);
this.Step = Math.abs(this.options.Step);
this.Time = Math.abs(this.options.Time);
this.Loop = this.options.Loop;
this.Relative = this.options.Relative;

this.SetPosition(this.options.X || [], this.options.Y || []);
},
//设置默认属性
SetOptions: function(options) {
this.options = {//默认值
Step: 10,//滑动变化率
Time: 10,//滑动延时
X: [],//x坐标变化
Y: [],//y坐标变化
Loop: false,//是否循环
Relative: true//是否相对位置
};
Object.extend(this.options, options || {});
},
//
SetPosition: function(arrX, arrY) {
if(arrX.length 0) this.X = this._xs.shift();
if(this._ys.length > 0) this.Y = this._ys.shift();

if(this.Loop && this._xs.length > 0 && this._ys.length > 0) { this._xs.push(this.X);this._ys.push(this.Y); }

//$("aa").innerHTML+=this._ys.length+"=";
this.Move(this.X, this.Y);
},
//
Move: function(iX, iY) {
clearTimeout(this._timer);

var iLeft = parseInt(this.obj.style.left) || 0, iTop = parseInt(this.obj.style.top) || 0, iLeftStep = this.GetStep(iX, iLeft), iTopStep = this.GetStep(iY, iTop);

if (iLeftStep == 0 && iTopStep == 0) {
this.Set();
} else {
this.obj.style.left = (iLeft + iLeftStep) + "px"; this.obj.style.top = (iTop + iTopStep) + "px";
var oThis = this; this._timer = setTimeout(function(){ oThis.Move(iX, iY); }, this.Time);
}
},
//
GetStep: function(iTarget, iNow) {
var iStep = (iTarget - iNow) / this.Step;
if (iStep == 0) return 0;
if (Math.abs(iStep) 0 ? 1 : -1);
return iStep;
}
};

window.onload = function(){
new Slippage("idSlippage3", { X: [200,200,0,-200,-100,-100], Y: [0,0,100,-100,100,-100], Loop: true });

var oSlippage = new Slippage("idSlippage");
$("aa").onclick = function(e){ var oEvent = Event(e);oSlippage.Move(oEvent.pageX, oEvent.pageY);}

var oSlippage2 = new Slippage("idSlippage2", { Step: 1, Relative: false }),x=[],y=[];
$("bb").onmousedown = function(e){ addEventHandler(this, "mousemove", Set); }
$("bb").onmouseout = function(e){ removeEventHandler(this, "mousemove", Set); x=y=[];}
$("bb").onmouseup = function(e){ removeEventHandler(this, "mousemove", Set); oSlippage2.SetPosition(x, y);x=y=[];}
function Set(e){ var oEvent = Event(e); x.push(oEvent.pageX); y.push(oEvent.pageY); }
}

自动滑移:

定点滑移:（鼠标点击）

定线滑移:（鼠标拖动轨迹）

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]