<! 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 > 滑移效果 </ 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 >

自动滑移:

< div  id ="cc"  style ="height:200px; width:500px; border:1px solid #000000;  position:relative;overflow:hidden;" >

   < div  id ="idSlippage3"  style ="width:10px; height:10px; background:#000000; position:absolute; z-index:99; top:50px; left:50px;" >   </ div >

</ div >

定点滑移:（鼠标点击）

< div  id ="aa"  style ="height:200px; width:500px; border:1px solid #000000; overflow:hidden;" >

   < div  id ="idSlippage"  style ="width:10px; height:10px; background:#000000; position:absolute; z-index:99; top:-50px; left:50px;" >   </ div >

</ div >

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

< div  id ="bb"  style ="height:200px; width:500px; border:1px solid #000000; overflow:hidden;" >

   < div  id ="idSlippage2"  style ="width:10px; height:10px; background:#000000; position:absolute; z-index:99; top:-50px; left:50px;" >   </ div >

</ div >

</ body >

</ html >