上次做图片
滑动展示效果
时做了减速效果，就想做一个加速效果。结合起来就想到了下面这个东西，当然只是类似弹簧，而不是真正的弹簧。
先看效果：
固定范围反弹：
范围渐变反弹：
自定范围反弹：
范围：
程序说明：
虽然说的是弹簧效果，但实际上要实现的是定点坐标之间的加速和减速移动。
点到点的移动应该都知道怎么做，这里是通过设置滑动对象的left来实现的。
而减速效果，一般的做法是通过用目标值减当前值除以一个系数(一般为正整数)，得到一个步长。
然后当前值加上这个步长作为新的当前值，然后反复取值直到当前值等于目标值。
由于这样得到的步长是越来越小的，而步长就是移动的值，所以就做成减速效果。
那如何做加速效果呢？
由于取不到能对应减速步长的加速的步长（或者有方法我想不到），所以我想了个方法，
一开始先把所有减速的步长算出来，放到一个数组中，作为减速时的步长，那加速的步长就是这个数组的反转了(即倒过来)。
这个部分主要在SetStep()函数中，可参照代码。
其他部分在代码中都有说明。
程序代码：
Codevar $=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 (container, obj, iOrigin, iRange, options) {
this ._obj =$(obj);//滑动对象this ._xo =parseInt(iOrigin);//中轴坐标(即原来坐标)this ._xt =0 ;//目标坐标this ._xs =[];//目标坐标集合this ._steps =[];//步长集合this ._fast =true ;//是否加速this .Range =iRange ||0 ;//滑动范围(宽度)this .SetOptions(options);
this .Step =parseInt(this .options.Step);
this .Time =parseInt(this .options.Time);
this .Zoom =parseInt(this .options.Zoom);
this .Reduce =!!this .options.Reduce;
this .Min =parseInt(this .options.Min);
this .Max =parseInt(this .options.Max);
this .onMin =this .options.onMin;
this .onMax =this .options.onMax;
this .onSide =this .options.onSide;
//样式设置$(container).style.position =”relative “;
this ._obj.style.position =”absolute “;
this ._obj.style.left =this ._xo +”px “;
if (this .Range >0 )this .Start();
},
//设置默认属性SetOptions:function (options) {
this .options ={//默认值Step:10 ,//滑动变化率Time:10 ,//滑动延时Zoom:0 ,//缩放变化率Reduce:true ,//是否缩小Min:0 ,//最小范围Max:0 ,//最大范围onMin:function (){},//到达最小时执行onMax:function (){},//到达最大时执行onSide:function (){}//到达边界时执行};
Object.extend(this .options, options ||{});
},
//从轴点开始Start:function (iRange) {
clearTimeout(this ._timer);
//iRange有值的话重新设置滑动范围if (iRange)this .Range =iRange;
//是否到了最小点if (this .Reduce &&(this .Range
测试html：
Code
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/535876/
转载文章受原作者版权保护。转载请注明原作者出处！