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>滑移效果</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 <= 0return 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 == 0this._xs[0+= this.X; } else this._xs[i] += this._xs[i-1]; } }
        
for(var i in this._ys)if (i == 0this._ys[0+= this.Y; } else this._ys[i] += this._ys[i-1]; } }
    }

    
    
this.Set();
  }
,
  
//
  Set: function() {
    
//当全部坐标指向同一个位置时会进入死循环
    if(this._xs.length <= 0 && this._ys.length <= 0return;
    
    
if(this._xs.length > 0this.X = this._xs.shift();
    
if(this._ys.length > 0this.Y = this._ys.shift();
    
    
if(this.Loop && this._xs.length > 0 && this._ys.length > 0this._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 = thisthis._timer = setTimeout(function(){ oThis.Move(iX, iY); }this.Time);
    }

  }
,
  
//
  GetStep: function(iTarget, iNow) {
    
var iStep = (iTarget - iNow) / this.Step;
    
if (iStep == 0return 0;
    
if (Math.abs(iStep) < 1return (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>
posted @ 2008-05-16 15:14 cloudgamer 阅读(...) 评论(...) 编辑 收藏