집 > 기사 > 웹 프론트엔드 > 점점 더 커지는 링 인스턴스를 생성하는 JS 구현_javascript 기술

점점 더 커지는 링 인스턴스를 생성하는 JS 구현_javascript 기술

WBOY원래의: 2016-05-16 15:47:091352검색

이 기사의 예에서는 점점 더 커지는 링을 생성하는 JS 구현을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

여기서는 JavaScript를 사용하여 원이 커지거나 작아지는 것을 생성합니다. 이는 JavaScript를 사용하여 애니메이션 효과를 생성하는 방법을 연구하는 좋은 예입니다.

작동 효과는 아래와 같습니다.

구체적인 코드는 다음과 같습니다.

<!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>
<style>
#div1 {width:2px; height:2px; position:absolute; background:red; left:150px; top:200px;}
div {width:3px; height:3px; position:absolute; background:black;}
</style>
<title>JS圆环</title>
<script type="text/javascript">
var n=30;
var r=100;
var a=true;
window.onload=function ()
{
 var oDiv1=document.getElementById('div1');
 var aDiv=[];
 var oDiv=null;
 var j=0;
 var i=0;
 for(i=0;i<n;i++)
 {
  oDiv=document.createElement('div');
  aDiv.push(oDiv);
  document.body.appendChild(oDiv);
 }
 calcDrg();
 function calcDrg()
 {
  for(i=0;i<n;i++)
  {
   var degress=360*i/n+j;
   var a=Math.sin(degress*Math.PI/180)*r;
   var b=Math.cos(degress*Math.PI/180)*r;
   aDiv[i].style.left=oDiv1.offsetLeft+b+'px';
   aDiv[i].style.top=oDiv1.offsetTop-a+'px';
  }
 }
 setInterval(function (){
  j++;
  var s=0.3;
  a&#63;r-=s:r+=s;
  if(r<=0 || r>=100)
  {
   a=!a;
  }
  calcDrg();
 }, 10);
};
</script>
</head>
<body>
<div id="div1">
</div>
</body>
</html>

이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.

성명：

이전 기사：JavaScript는 encodeURI() 및 decodeURI()를 사용하여 문자열 값을 얻습니다._javascript 팁다음 기사：JavaScript는 encodeURI() 및 decodeURI()를 사용하여 문자열 값을 얻습니다._javascript 팁

점점 더 커지는 링 인스턴스를 생성하는 JS 구현_javascript 기술

관련 기사