Code:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title>js slip effect </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 | | []); },//Set default properties Setoptions:function (options) {this.options = {//default value step:10,//sliding rate time:10,//Sliding delay X: [],//x coordinate change Y: [],//y coordinate changes loop:false,//whether the loop relative:true//relative position}; 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 () {///when all the coordinates point to the same position will enter the dead loop 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 (); IfThis. 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> </pead> <body> auto slip: <div id= "CC" > <div id= "IdSlippage3" > </div> </div> Point slip: (mouse clicks) <div id= "AA" > <div id= "idslippage" > </div> </div> fixed line slip: (Mouse drag trajectory) <div id= "BB" > <div id= "idSlippage2" > </div> </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
