자바스크립트 모션 감속 효과 분석 example_javascript 스킬
- WBOY원래의
- 2016-05-16 15:47:241138검색
이 기사의 예에서는 JavaScript 모션 감속 효과를 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.
이 코드는 JS를 사용하는 친구들이 게임 프로그래밍에 참여할 때 도움이 될 수 있습니다. 주로 실행 감속 버퍼 효과를 구현하는 코드입니다.
작동 효과는 아래와 같습니다.
구체적인 코드는 다음과 같습니다.
<!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>JavaScript运动减速效果</title>
</head>
<body>
<div style=" position:relative; border:1px solid #000000; width:550px; height:50px;">
<div id="aa" style="width:50px; height:50px; background:#930; position:absolute;"></div>
</div>
<div id="x"></div>
<div style=" position:relative; border:1px solid #000000; width:550px; height:50px;">
<div id="bb" style="width:50px; height:50px; background:#0000FF; position:absolute;"></div>
</div>
<div id="y"></div>
<script>
var $ = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
};
var ss = 0;
var s = 500;
var tt = 300;
var a = 2*s/(tt*tt);
var o = $("aa");
var i = 0;
var t = 0;
function run(){
t++;
i = parseInt((a*tt)*t - .5 * a * (t*t));
if(i>=s){ o.style.left = ss + s + "px"; return; }
o.style.left = ss + i + "px";
$("x").innerHTML+=i+",";
setTimeout(run, 10);
}
run();
var s2 = 500;
var o2 = $("bb");
var i2 = 0;
function run2(){
var s = (s2-i2)/100;
if(s>0 && s < 1){ s=1; };
if(s==0 || i2 + s>=s2){ o2.style.left = ss + s2 + "px"; return; }
o2.style.left = ss + i2 + s + "px";
i2=i2 + s;
$("y").innerHTML+=parseInt(i2 + s)+",";
setTimeout(run2, 10);
}
run2();
</script>
</body>
</html>
이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.