Tuesday, June 12, 2012

Simple animation

ဒီေန႔ေတာ႔ဗ်ာ

javascript သံုးျပီး text animation လုပ္ပံုေလးကိုေဖာ္ျပေပးလိုက္ပါတယ္ လိုက္လုပ္ၾကည္႔ေပါ႔


<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Javascript animation: div object</title>
<style type="text/css">
body{
background-color:black;
color:#ffffff;
}
#myobject
{
  position:fixed;
  top:50px;
}
</style>
<script type="text/javascript">
var myobject="";              
  //boolean Object တစ္ခုဖန္တီးလိုက္တာပါ ဒီေနရာမွာ  -0,null,"",false,undefined,NaN အဆင္ေျပသလိုထည္႔သြင္းနိုင္ပါတယ္
var speed=50;                     
//လိုခ်င္တဲ႔ တန္ဖိုးသတ္မွတ္ျပီး object တစ္ခုကိုထပ္ျပီးဖန္တီးပါတယ္
function move()                 
  // move ဆိုတဲ႔  function လုပ္ေဆာင္ခ်က္ကိုေရးမွာပါ
{
myobject.style.left=parseInt(myobject.style.left)+1+'px';    
//myobject ကို css ျဖစ္တဲ႔ style.left နဲ႔ ဘယ္ဘက္ကိုေရႊ႔ဖို႔ method ေရးျပီး myobject.styl.left ကို assign လုပ္ပါတယ္
setTimeout("move()",speed);                                                                           
  //move() function ရဲ႕ၾကာခ်ိန္ကို speed ဆိုတဲ႔ var နဲ႔သတ္မွတ္ျပီး setTimeout method နဲ႔စပါမယ္
}
function init()                                                                                                                 
  //ဘယ္ကေန ဘယ္လိုစမယ္ဆိုတဲ႔ function ကိုေရးပါတယ္
{
myobject=document.getElementById('myobject');                   
 //ေအာက္က div ထဲမွာ id="myobject" ကို getElementById နဲ႔ ျပန္ဖမ္းျပီး myobject ထဲကို assign ျပန္လုပ္ထားပါတယ္
myobject.style.left='1px';                                                                                        
 //myobject ကို 1px ဆိုျပီး အစက စမယ္လို႔ေျပာပါတယ္
move();                                                                                                                                
    //move ဆိုတဲ႔  function စပါျပီ
}
window.onload=init;                                                                                                    
 //window ကိုဖြင္႔လိုုက္တာနဲ႔ init ဆိုတဲ႔  function ကိုေခၚသံုးျပီး move() ဆိုတဲ႔ function method ကိုစပါျပီ
</script></head>
<body>
<div id="myobject">MMCyberdevils</div>                               
   <!--MMCyberdevils ကိုၾကိဳက္သလိုျပင္ေရးၾကည္႔႔ပါ-->
</body>
</html>

No comments:

Post a Comment

Thanks for your comments
Welcome from cyberoot