JS 가 실현 한 포물선 운동 효과 예시
먼저 운행 효 과 를 살 펴 보 자.
구체 적 인 코드 는 다음 과 같다.
<!doctype html >
<html>
<head>
<meta charset="utf-8"/>
<title> </title>
<style>
.pwx_rect{position:absolute;left:10px;top:300px;background-color:#888;height:50px;width:50px;}
.pwx_hr{border-top:2px solid #ddd;position:absolute;width:98%;left:0px;top:350px;}
</style>
<script>
test = function(){
var rect = document.getElementById("rect");
pwx(rect,60,5); // 2： ， 3： 5
}
function pwx(rect,radian,step){
var animate = function(opt){
var cos = Math.cos(opt.radian*Math.PI/180);// ,60 1/2
var sin = Math.sin(opt.radian*Math.PI/180);// ,30 1/2
var left = opt.rect.offsetLeft;
var top = opt.rect.offsetTop;
if(opt.radian>0){
left+=opt.step;
opt.radian-=1; // 1
var a = left - opt.initLeft;
var c = (a/cos);
var b = (sin*c);
opt.rect.style.left = opt.initLeft+a+"px";
opt.rect.style.top = opt.initTop-b+"px";
setTimeout(function(){
animate(opt);
},10);
}else{
opt.rect.style.left = left+opt.step+"px";
opt.rect.style.top = opt.initTop+"px";
}
}
animate({
step : step,
rect : rect,
radian : radian,
initTop : rect.offsetTop,
initLeft : rect.offsetLeft
});
}
</script>
</head>
<body>
www.jb51.net
<input type="button" value=" " onclick="test()"/>
<div class="pwx_rect" id="rect"></div>
<div class="pwx_hr"></div>
</body>
</html>
X 방향의 길이 가 매번 5 씩 증가 하고 각 도 는 매번 1 씩 줄어든다.이 두 가지 이미 알 고 있 는 조건 에 따라 삼각 함 수 를 통 해 Y 방향의 길이 가 얼마 인지 계산 할 수 있다.
따라서 매번 운동 하 는 X 와 Y 방향의 좌표 값 을 얻어 포물선 의 효 과 를 얻는다.
자 바스 크 립 트 관련 내용 에 관심 이 있 는 독자 들 은 본 사이트 의 주 제 를 볼 수 있 습 니 다.,,,,,,,,,,,,
본 고 에서 말 한 것 이 여러분 의 자 바스 크 립 트 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
JS 판단 수조 네 가지 실현 방법 상세그러면 본고는 주로 몇 가지 판단 방식과 방식 판단의 원리를 바탕으로 문제가 있는지 토론하고자 한다. 예를 들어 html에 여러 개의 iframe 대상이 있으면 instanceof의 검증 결과가 기대에 부합되지 않을...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
