JavaScript滑移效果代码

代码：

<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>js滑移效果</title> <script type="text/javascript"> 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 && arrX.length <= 0） return false; else if（arrX.length <= 0） arrX = [0]; else if（arrY.length <= 0） arrY = [0]; this._xs = arrX; this._ys = arrY; if（this.Relative）{ for（var i in this._xs）{ if （i == 0） { this._xs[0] += this.X; } else { this._xs[i] += this._xs[i-1]; } } for（var i in this._ys）{ if （i == 0） { this._ys[0] += this.Y; } else { this._ys[i] += this._ys[i-1]; } } } this.Set（）; }, // Set: function（） { //当全部坐标指向同一个位置时会进入死循环 if（this._xs.length <= 0 && this._ys.length <= 0） return; if（this._xs.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） < 1） return （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）; } } </script> </head> <body> 自动滑移: 定点滑移:（鼠标点击） 定线滑移:（鼠标拖动轨迹） </body> </html>

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