윈도우 지터 효과 예제 코드의 JavaScript 구현
- 怪我咯원래의
- 2017-07-04 15:14:532124검색
흔들림 효과는 모든 주요 웹 페이지에서 자주 볼 수 있습니다. 이 기사에서는 창 흔들림 효과를 구현하기 위한 JavaScript 관련 정보를 주로 소개합니다. 이는 매우 좋으며 도움이 필요한 친구들은
의 원리를 참조할 수 있습니다.지터는 실제로 왕복 운동의 특별한 형태입니다. 단, 왕복 운동은 마찰이 없는 무한 운동이고 속도를 기준으로 사용하는 반면 지터는 위치를 기준으로 사용하고 마침내 시작에서 멈춥니다. 시작점
웹 페이지에서 가장 일반적인 디더링 효과는 창 흔들기 프롬프트입니다.
디더링 요소는 시작점에서 시작하여 먼저 최대 거리 len만큼 오른쪽으로 이동한 다음 대칭으로 이동합니다. 왼쪽 위치; 그런 다음 왼쪽으로 이동합니다. 이 루프에서 약간 더 작은 거리를 오른쪽으로 이동한 다음 대칭적인 왼쪽 위치로 이동하면 마지막 요소가 시작점에서 멈춥니다
코드 구현
지터링 코드 구현에서는 타이머에 지나지 않습니다. 일정 시간 동안 왼쪽 또는 위쪽 값이 변경되도록 하세요
모션 구현에는 거리 변경에 대한 두 가지 아이디어가 있습니다
아이디어 1
p.style.left = p.offsetLeft + value;
매번 요소의 현재 스타일을 가져와서 변경된 값과 비교합니다. Operation
아이디어 2
left = p.offsetLeft; ...... p.style.left = left + value;
타이머가 켜지기 전에 요소의 초기 스타일을 얻은 후 다음으로 계산을 수행합니다. 변경된 값
지터 구현 관점에서 두 번째 방법을 사용하면 거리가 완전히 변경됩니다. 값을 변경하여 구현하는 것이 더 간단합니다. 따라서 코드 구현의 핵심은 값이 어떻게 변경되는지 이해하는 것입니다. 가장 먼 거리가 목표이고, 같은 방향의 거리 간격이 계단입니다. 숫자로 좀 더 직관적으로 표현하면 value의 값은 4, -4, 2, -2, 0과 비슷합니다. 따라서 흔들기 시작 방향을 제어하려면 변수 dir이 필요합니다. 타이머가 움직일 때마다 dir을 변경해야 합니다.
//定时器开启前的变量声明
dir = 1;
step = 0;
left = p.offsetLeft
//定时器里面的代码
value = dir*(target - step);
if(step >= target){
step = target
}
p.style.left = left + value + 'px';
if(dir === -1){
step++;
}
dir = -dir;흔들기 효과를 shakeMove.js에 캡슐화합니다.
function getCSS(obj,style){
if(window.getComputedStyle){
return getComputedStyle(obj)[style];
}
return obj.currentStyle[style];
}
function shakeMove(json){
//声明要进行抖动的元素
var obj = json.obj;
//声明元素抖动的最远距离
var target = json.target;
//默认值为20
target = Number(target) || 20;
//声明元素的变化样式
var attr = json.attr;
//默认为'left'
attr = attr || 'left';
//声明元素的起始抖动方向
var dir = json.dir;
//默认为'1'，表示开始先向右抖动
dir = Number(dir) || '1';
//声明元素每次抖动的变化幅度
var stepValue = json.stepValue;
stepValue = Number(stepValue) || 2;
//声明回调函数
var fn = json.fn;
//声明步长step
var step = 0;
//保存样式初始值
var attrValue = parseFloat(getCSS(obj,attr));
//声明参照值value
var value;
//清除定时器
if(obj.timer){return;}
//开启定时器
obj.timer = setInterval(function(){
//抖动核心代码
value = dir*(target - step);
//当步长值大于等于最大距离值target时
if(step >= target){
step = target
}
//更新样式值
obj.style[attr] = attrValue + value + 'px';
//当元素到达起始点时，停止定时器
if(step == target){
clearInterval(obj.timer);
obj.timer = 0;
//设置回调函数
fn && fn.call(obj);
}
//如果此时为反向运动，则步长值变化
if(dir === -1){
step = step + stepValue;
}
//改变方向
dir = -dir;
},50);
}
인스턴스 애플리케이션
아래 패키지를 사용하세요. shakeMove로 간단한 흔들기 애플리케이션 구현<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.test{
height: 50px;
width: 50px;
position: absolute;
top: 50px;
}
</style>
</head>
<body>
<p id="box">
<p class="test" style="left:10px;background:lightblue"></p>
<p class="test" style="left:70px;background:lightgreen"></p>
<p class="test" style="left:130px;background:pink"></p>
<p class="test" style="left:190px;background:lightcoral"></p>
<p class="test" style="left:250px;background:orange"></p>
</p>
<script src="http://files.cnblogs.com/files/xiaohuochai/shakeMove.js"></script>
<script>
var ap = box.getElementsByTagName('p');
for(var i = 0; i < ap.length; i++){
ap[i].onmouseover = function(){
shakeMove({obj:this,attr:'top'});
}
}
</script>
</body>
</html>
위 내용은 윈도우 지터 효과 예제 코드의 JavaScript 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!