네이티브 javascript_javascript 기술로 구현된 간단한 애니메이션 효과-JS 튜토리얼-php.cn

네이티브 javascript_javascript 기술로 구현된 간단한 애니메이션 효과

WBOY

풀어 주다： 2016-05-16 15:07:21

원래의

1861명이 탐색했습니다.

이 글에서는 자바스크립트로 구현한 애니메이션을 소개합니다. 시작 버튼을 클릭하면 div가 오른쪽으로 이동합니다. 중지를 클릭하면 div가 계속 이동합니다. 아래 코드를 참조하세요.

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<head>
<title>javascript实现的简单动画</title>
<style type="text/css">
#mydiv
{
 width:50px;
 height:50px;
 background-color:green;
 position:absolute;
}
</style>
<script type="text/javascript"> 
window.onload=function()
{
 var mydiv=document.getElementById("mydiv");
 var start=document.getElementById("start");
 var stopmove=document.getElementById("stopmove");
 var x=0;
 var flag;
 function move()
 {
  x=x+1;
  mydiv.style.left=x+"px";
 }
 start.onclick=function()
 {
  clearInterval(flag);
  flag=setInterval(move,20);
 }
 stopmove.onclick=function()
 {
  clearInterval(flag);
 }
 
}
</script>
<body>
<input type="button" id="start" value="开始运动" />
<input type="button" id="stopmove" value="停止运动" />
<div id="mydiv"></div>
</body>
</html>

로그인 후 복사

코드 설명:

1.window.onload=function(){}, 문서 콘텐츠가 완전히 로드되면 함수의 코드를 실행합니다.
2.var mydiv=document.getElementById("mydiv"), id 속성 값이 mydiv인 요소를 가져옵니다.
3.var start=document.getElementById("start"), id 속성 hi가 start인 요소를 가져옵니다.
4.var stopmove=document.getElementById("stopmove"), id 속성 값이 stopmove인 요소를 가져옵니다.
5.mydiv.style.left=x+"px", div의 왼쪽 속성 값을 설정합니다.
6.start.onclick=function(){}, 시작 요소에 대한 onclick 이벤트 처리 함수를 등록합니다.
7.clearInterval(플래그), 타이머 기능을 중지하고 한 쪽이 시작 버튼을 여러 번 클릭하여 오버레이 효과를 발생시킵니다.
8.flag=setInterval(move,20), 이동을 시작합니다.

위의 네이티브 자바스크립트로 구현된 간단한 애니메이션 효과는 모두 에디터가 공유한 내용이므로 참고가 되셨으면 좋겠습니다. 또한 모두가 Script Home을 응원해 주시길 바랍니다.