javascript_javascript 스킬로 탄성 모션 효과를 간단하게 구현하는 방법-JS 튜토리얼-php.cn

javascript_javascript 스킬로 탄성 모션 효과를 간단하게 구현하는 방법

WBOY

풀어 주다： 2016-05-16 15:20:54

원래의

1423명이 탐색했습니다.

이 글의 예시에서는 자바스크립트 탄성 모션 효과의 간단한 구현 방법을 설명합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

탄성운동의 원리 : 가속운동, 감속운동, 마찰운동

런닝 효과 스크린샷은 다음과 같습니다.

예제 코드는 다음과 같습니다.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1{ width:100px; height:100px; background:red; position:absolute; left:0; top:50px;}
</style>
<script>
window.onload = function()
{
 var oBtn = document.getElementById('btn1');
 var oDiv = document.getElementById('div1');
 oBtn.onclick = function()
 {
 startMove(oDiv, 300);
 };
};
var iSpeed = 0;
var left = 0;
function startMove(obj, iTarget)
{
 clearInterval(obj.timer);
 obj.timer = setInterval(function(){
 iSpeed += (iTarget - obj.offsetLeft)/5;
 iSpeed *= 0.7;
 left += iSpeed;
 if(Math.abs(iSpeed)<1 && Math.abs(left-iTarget)<1){
  clearInterval(obj.timer);
  obj.style.left = iTarget + 'px';
 }else{
  obj.style.left = obj.offsetLeft + iSpeed + 'px';
 }
 }, 30);
}
</script>
</head>
<body>
<input id="btn1" type="button" value="运动" />
<div id="div1"></div>
<div style="width:1px; height:300px; background:black; position:absolute; top:0; left:300px; "></div>
</body>
</html>

로그인 후 복사

JavaScript 모션 효과와 관련된 더 많은 콘텐츠를 보려면 이 사이트의 특별 주제인 " JavaScript 모션 효과 및 기술 요약"

을 참조하세요.

이 기사가 JavaScript 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.