首页 > 网络编程 > JavaScript > javascript技巧 > JavaScript滑移

JavaScript滑移效果代码

2008-09-15 11:02:23 作者：

这里说的滑移其实就是减速效果，能根据设定的坐标平面移动。

代码：

<!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; 
}

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);}

</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>

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