<!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 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;
}
};
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 Bounce = Class.create();
Bounce.prototype = {
initialize: function(obj, iRange, options) {
this.obj = $(obj);
this._X = this.X = parseInt(this.obj.style.left) || 0;
this._side = -1;
this._steps = [];
this.Max = this.Range = iRange || 0;
this.SetOptions(options);
this.Step = Math.abs(this.options.Step);
this.Time = Math.abs(this.options.Time);
this.Zoom = Math.abs(this.options.Zoom);
this.Reduce = !!this.options.Reduce;
this.Min = Math.abs(this.options.Min);
this.Max = Math.abs(this.options.Max);
this.onMin = this.options.onMin;
this.onMax = this.options.onMax;
this.Start(this.Range);
},
//设置默认属性
SetOptions: function(options) {
this.options = {//默认值
Step: 10,//滑动变化率
Time: 10,//滑动延时
Zoom: 0,//缩放变化率
Reduce: true,//是否缩小
Min: 0,//最小范围
Max: 0,//最大范围
onMin: function(){},//到达最小时函数
onMax: function(){}//到达最大时函数
};
Object.extend(this.options, options || {});
},
//
Start: function(iRange) {
if(this.Reduce && (iRange <= 0 || iRange <= this.Min)) {
this.onMin();return;
}
if(!this.Reduce && (this.Max > 0 && iRange >= this.Max)) {
this.onMax();return;
}
this.Range = iRange;
this.obj.style.left = this._X + "px";
this._xs = [this._X + iRange, this._X, this._X - iRange, this._X];
this._side = -1;
this.Set();
},
//
Set: function() {
if(this._xs.length <= 0){ this.Start(this.Zoom > 0 ? (this.Reduce ? -1 : 1) * this.Zoom + this.Range : this.Range); return; }
this.X = this._xs.shift();
this._steps = GetStep(this.X, parseInt(this.obj.style.left), this.Step)
if(this._side > 0) this._steps.reverse();
this._side *= -1;
this.Move();
},
//
Move: function() {
clearTimeout(this._timer);
if(this._steps.length <= 0) {this._steps = [0];}
var iNow = parseInt(this.obj.style.left), iStep = this._steps.shift();
if (iStep == 0) {
this.Set();
} else {
this.obj.style.left = (iNow + iStep) + "px";
var oThis = this; this._timer = setTimeout(function(){ oThis.Move(); }, this.Time);
}
}
};
//从大到小
function GetStep(iTarget, iNow, iStep){
var arrStep=[];
iTarget=parseInt(iTarget);
iNow=parseInt(iNow);
iStep=parseInt(iStep);
(function _GetStep(iNow){
var i = (iTarget - iNow) / iStep;
if (i == 0) { return; }
else if (Math.abs(i) < 1) { i = i > 0 ? 1 : -1; }
i=parseInt(i)
arrStep[arrStep.length]=i;
_GetStep(iNow+i);
})(iNow)
return arrStep;
}
window.onload=function(){
var o = new Bounce("idBounce", 200, { Zoom: 20, Max: 200, onMax: function(){o.Reduce=true;o.Start(200);}, onMin: function(){o.Reduce=false;o.Start(0);} });
new Bounce("idBounce1", 200);
var o2 = new Bounce("idBounce10");
$("bb").onclick = function(){
o2.Start(parseInt($("aa").value) || 200);
}
}
</script>
</head>
<body>
固定范围反弹：
<div style="position:relative; border:1px solid #000000;height:50px; width:500px;">
<div id="idBounce1" style="width:10px; height:10px; background:#000000; position:absolute; z-index:99; top:20px; left:250px;"> </div>
</div>
<br />
范围渐变反弹：
<div style="position:relative; border:1px solid #000000; height:50px; width:500px;">
<div id="idBounce" style="width:10px; height:10px; background:#000000; position:absolute; z-index:99; top:20px; left:250px;"> </div>
</div>
<br />
自定范围反弹：
<div style="position:relative; border:1px solid #000000;height:50px; width:500px;">
<div id="idBounce10" style="width:10px; height:10px; background:#000000; position:absolute; z-index:99; top:20px; left:250px;"> </div>
</div>
<br />
范围：
<input id="aa" name="" type="text" value="200" size="8" />
<input id="bb" name="" type="button" value=" 开始 " />
<br />
</body>
</html>
