cari

Rumah  >  Artikel  >  hujung hadapan web  >  Pelaksanaan JS untuk menjana contoh cincin yang akan menjadi kemahiran javascript yang lebih besar dan lebih kecil

Pelaksanaan JS untuk menjana contoh cincin yang akan menjadi kemahiran javascript yang lebih besar dan lebih kecil

WBOY
WBOYasal
2016-05-16 15:47:091355semak imbas

Contoh dalam artikel ini menerangkan pelaksanaan JS untuk menjana gelang yang akan menjadi lebih besar dan lebih kecil. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Di sini, JavaScript digunakan untuk menjana bulatan, yang akan menjadi lebih besar dan lebih kecil Ini adalah contoh yang baik untuk mengkaji cara menggunakan JavaScript untuk menjana kesan animasi.

Kesan operasi adalah seperti yang ditunjukkan di bawah:

Kod khusus adalah seperti berikut: 

<!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>

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：JavaScript menggunakan encodeURI() dan decodeURI() untuk mendapatkan petua string values_javascriptArtikel seterusnya：JavaScript menggunakan encodeURI() dan decodeURI() untuk mendapatkan petua string values_javascript

Artikel berkaitan

Lihat lagi