cari

Rumah >hujung hadapan web >tutorial js >Javascript asli mencapai kemahiran effect_javascript animasi gerakan seragam

Javascript asli mencapai kemahiran effect_javascript animasi gerakan seragam

WBOY
WBOYasal
2016-05-16 15:13:111490semak imbas

Artikel ini memperkenalkan anda kepada animasi yang dilaksanakan dalam javascript. Apabila anda mengklik butang mula, div akan bergerak ke kanan Apabila anda mengklik berhenti, div akan berhenti bergerak. Sila lihat kod di bawah: 

<html> 
<head> 
<meta charset="gb2312"> 
<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>

Rendering:

Di atas adalah keseluruhan kandungan artikel ini saya harap ia akan membantu semua orang dalam mempelajari pengaturcaraan javascript.

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：Melaksanakan butang kembali ke atas berdasarkan kemahiran Javascript_javascriptArtikel seterusnya：Melaksanakan butang kembali ke atas berdasarkan kemahiran Javascript_javascript

Artikel berkaitan

Lihat lagi