js 스프링 효과 code_javascript 기술

스프링 효과라고 하지만 실제로 얻어지는 것은 고정점 좌표 사이의 가감속 이동이다.
점대점 이동 방법을 알아야 합니다. 여기서는 슬라이딩 개체의 왼쪽을 설정하여 수행합니다.
감속 효과의 경우 일반적인 접근 방식은 목표 값에서 현재 값을 뺀 값을 계수(보통 양의 정수)로 나누어 단계 크기를 구하는 것입니다.
그런 다음 현재 값이 이 단계 크기에 새로운 현재 값으로 추가된 다음 현재 값이 목표 값과 같아질 때까지 값을 반복적으로 가져옵니다.
이렇게 얻은 스텝 크기는 점점 작아지고, 그 스텝 크기는 이동의 값이기 때문에 감속 효과를 만들어냅니다.
가속 효과를 만드는 방법은 무엇입니까?
감속 단계 크기에 해당하는 가속 단계 크기를 구할 수 없기 때문에(혹은 제가 생각하지 못하는 방법이 있어서) 방법을 생각해 보았습니다.
먼저 모든 것을 계산해 보세요. 감속 단계 크기를 지정하고 이를 하나로 합칩니다. 배열에서 감속 중 단계 크기로 가속을 위한 단계 크기는 배열의 반전(즉, 거꾸로)입니다.
이 부분은 주로 SetStep() 함수에 있는 부분이니 코드를 참고해주세요.
그 외 부분은 코드에 설명되어 있습니다.

프로그램 코드:
코드

코드 복사 코드는 다음과 같습니다.

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, 인수);
}
}
}

Object.extend = function(destination, source) {
for(소스의 var 속성) {
destination[property] = source[ 재산];
}
귀국 목적지;
}


var Bounce = Class.create();
Bounce.prototype = {
//容器对象,滑动对象,hara始位置,移动范围
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 = parsInt(this.options.Time);
this.Zoom = parsInt(this.options.Zoom);
this.Reduce = !!this.options.Reduce;
this.Min = parsInt(this.options.Min);
this.Max = parsInt(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 = "절대";
this._obj.style.left = this._xo "px";

if(this.Range > 0) this.Start();
},
//设置默认属性
SetOptions: function(options) {
this.options = {//默认值
단계: 10,//滑动变化率
시간: 10,//滑动延时
확대/축소: 0,//缩放变化率
줄이기: true,//是否缩小
최소: 0,//最小范围
최대: 0, //最大范围
onMin: function(){},//到达最小时执行
onMax: function(){},//到达最大时执行
onSide: function(){}//到达边界时执行
};
Object.extend(this.options, 옵션 || {});
},
//从轴点开始
시작: function(iRange) {
clearTimeout(this._timer);
//iRange에 새로운 내용이 있습니다.
if(iRange) this.Range = iRange;
//是否到了最小点
if(this.Reduce && (this.Range //是否到了最大点
if(!this.Reduce && (this.Max > 0 && this.Range >= this.Max)) { this.onMax(); 반품; }
//중계
this._obj.style.left = this._xo "px"; //设置为加速状态
this._fast = false;
//开始分段移动
this.Set();
},
//从分段开始
설정: function() {
//目标坐标tour到达后返回
if(this._xs.length this.Start(); 반품;
}
//取得目标坐标
this._xt = this._xs.shift(); //设置步长
this.SetStep();
//开始移动
this.Move();
},
//移动
이동: function() {
clearTimeout(this._timer);
//步长走完即到达目标坐标就返回
if (this._steps.length //执行移动
this._obj.style.left = (parseInt(this._obj.style.left) this._steps.shift()) "px";
//循环移动
var oThis = this; this._timer = setTimeout(function(){ oThis.Move(); }, this.Time);
},
//设置步长
SetStep: function() {
var iTemp =parseInt(this._obj.style.left);

//注意是从大到小排的
this._steps = [];

if(this.Step >= 1){
var i = 0;
do{
i = (this._xt - iTemp) / this.Step;
//步长不能包含0
if (i == 0) { break; } else if (Math.abs(i) 0? 1: -1; }
this._steps.push(i =parseInt(i));
iTemp = i;
} 동안(참);
//如果是加速的话反转步长集합
if(this._fast) this._steps.reverse();
}
//加速减速是交替进行的所以每次都要取反
this._fast = !this._fast;
}
};


测试html： 

复代码

代码如下:

固定范围反弹：

范围渐变反弹：

자정范围反弹：

范围：

测试代码：

复代码 代码如下:

new Bounce("idContainer", "idBounce", 250, 200);
var o = new Bounce("idContainer1", "idBounce1", 250, 200, {
Zoom: 20, Max: 200,
onMax: function(){ o.Reduce = true; o. 시작(200); },
onMin: function(){ o.Reduce = false(0) }
});

var o2 = new Bounce("idContainer2", "idBounce2", 250);
$("bb").onclick = function(){ o2.Start(parseInt($("aa").value) || 200); }
$("idFast").onclick = function(){ if(--o2.Step$("idSlow").onclick = function() { if( o2.Step>20){o2.Step=20} }
$("idZoom").onclick = function(){ o2.Zoom=50; }

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>javascript寮圭哀</title>