Tuesday, June 12, 2012

shake with js

ေအာက္မွာ ကၽြန္ေတာ္နည္းနည္းေလးရွင္းျပထားပါတယ္
စမ္းၾကည္႔ပါဦး
<html>                           <!--html tag စဖြင္႔ပါတယ္-->
<head>                    <!--header tag စဖြင္႔ပါတယ္-->
<style>                    /*style tag စဖြင္႔ပါတယ*/
body{background-color:black;color:#ffffff;} 
/*Css ကို ေနာက္ခံအမည္းေရာင္နဲ႔ စာသားကို အျဖဴေရာင္အျဖစ္ထားတာပါ*/
.shake{position:relative;margin:100px;} /*p ဆိုတဲ႔ class ျဖစ္တဲ႔ shake ကို css သံုးျပီးတည္ေနရာသတ္မွတ္ေပးထားတာပါ*/
</style>                                                         <!--style tag ကိုျပန္ပိတ္ပါတယ္-->
<script type="text/javascript"> //Javascript tag စပါတယ္
var speed=40;            //(shake)ရဲ႕အျမန္နွုန္းကို၄၀လိုသတ္မွတ္လိုက္ပါတယ္
var stopit=null;                        // အျမဲတမ္း shake မျဖစ္ေအာင္လို႔ stop ကိုပါထပ္ျပီးသတ္မွတ္ေပးလိုက္ပါတယ္
var a=1;                                        //shake စတင္ဖို႔အတြက္ a ကို ၁ လိုေၾကျငာထားပါတယ္
function init(which)      //init ဆိုတဲ႔ function တစ္ခုကိုစေရးပါတယ္
{
stopit=0           //stopit ကို ၀ ကေနစပါမယ္        ဆိုလိုတာက စစခ်င္းအလုပ္မလုုပ္ေသးဘူးလို႔ေျပာတာပါ
shake=which                                              //shake စလုပ္မယ္႔ p element ပါ
shake.style.left=0                               //shake စလုုပ္မယ္ တည္ေနရာပါ ဒါကို 0 ဘယ္လို႔သတ္မွတ္ေပးပါတယ္
shake.style.top=0                       //shake စလုုပ္မယ္ တည္ေနရာပါ ဒါကို 0 အေပၚလို႔သတ္မွတ္ေပးပါတယ္
}
function shake_text(){             //text ကုိ shake လုပ္မယ္႔ function ကုိစပါတယ္
if ((!document.all&&!document.getElementById)||stopit==1)
//အကယ္ရွ္ stopit က 1 ျဖစ္တယ္ဆိုရင္ေအာက္က ကုတ္ကိုအလုပ္ဆက္လုပ္မွာပါ
return                                                                   //ေအာက္က a ကို ၁ လိုသတ္မွတ္ထားပါတယ္ ဒါေၾကာင္႔
if (a==1){                                                              //a တန္ဖိုး 1 ျဖစ္ခဲ႕ရင္ေအာက္က method ကိုဆက္လုပ္မွာပါ
shake.style.top=parseInt(shake.style.top)+speed+"px"                            }
else if (a==2){                                    //a တန္ဖိုး 2 ျဖစ္ခဲ႕ရင္ေအာက္က method ကိုဆက္လုပ္မွာပါ
shake.style.left=parseInt(shake.style.left)-speed+"px"
}
else if (a==3){                                 //a တန္ဖိုး 3 ျဖစ္ခဲ႕ရင္ေအာက္က method ကိုဆက္လုပ္မွာပါ
shake.style.top=parseInt(shake.style.top)*speed+"px"
}
else{                                                                                                                                                                             
shake.style.left=parseInt(shake.style.left)%speed+"px"
}
if (a<4)                                                                              
     //a တန္ဖိုးက 4 ေအာက္ငယ္ခဲ႔ရင္
a++                                                                                                                 
     //a ကို 1 တိုးသြားမွာပါ
else
a=1                                     
 // a တန္ဖိုးကို 1 လိုစျပီးသတ္မွတ္ပါတယ္ အေပၚက function စပါျပီ
setTimeout("shake_text()",50)                           
 // setTimeout သံုးျပီး funciton ကိုစပါတယ္
}
function stoprattle(which){               //stop ဆိုတဲ႔ function ကိုစေရးပါတယ္
stopit=1                                                                 
       //stop  1 လုိသတ္မွတ္ပါတယ္
which.style.left=0                                    
    //မူလ တည္ေနရာကိုျပန္ျပီးသတ္မွတ္ထားပါတယ္
which.style.top=0
}
</script>
</head>
<body>
<!--ဒါက mouse တင္လိုက္ရင္ p tag က စျပီးအလုပ္လုပ္မွာပါ mouse ဖယ္လိုက္ရင္ေတာ႔မူလအတိုင္းျပန္ျဖစ္သြားမွာပါ-->
<p class="shake" onMouseover="init(this);shake_text()" onMouseout="stoprattle(this);top.focus()" onClick="top.focus()" >
Opps!</p>
</body>
</html>

No comments:

Post a Comment

Thanks for your comments
Welcome from cyberoot