Easy Motion Tween By JavaScript

bahy_my

Active Member
سلام
به قول معروف امید وارم با این آموزش خیلی ساده خیلی هم خوشحال شین. (کجاش قول معروف بود الان؟؟؟ )


HTML:
<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<script language="javascript"> 
n="true"; 
function tt(){ 
m="new"; 


if(document.getElementById(m).width<=300){ 
if(n=="true"){ 
document.getElementById(m).width=document.getElementById(m).width+13; 
} 
}else if(document.getElementById(m).width>=300){ 
n="false"; 

document.getElementById(m).width=document.getElementById(m).width-1; 


} 
setTimeout("tt();",1); 

} 
</script> 
</head> 

<body> 
<input type="button" onclick="tt()"; value="Start Tween"><br> 
<img name="new" width=10 id="new" style="background-color:#CCCCCC;"> 

</body> 
</html>



این تابع میاد چک می کنه که عرض img ما کمتره از 300 :(یا نه)
x تا x تا بهش اضافه کن تا بشه 300 یا بیشتر. (که x=13 هستش)

اگه بیشتر مساوی با 300 هستش :
اون موقع یکی یکی ازش کم کن.
این کارها با یه تصمیم گیری اتفاق میفته. که می تونید 300 رو یا x رو خودتون عوض کنید و نتیجه رو ببینید.
اون متغیر n هم می گه که اگه مقدارم true بود یکی اضافه کنه (که تا زمانی true هستش که کمتر مساوی 300 باشه عرض شی) و اگه false بود یکی کم کنه.
همین کد من رو اجرا کنید ببینید خوشتون میاد یا نه.
در آموزش های بعدی انشاالله بیشتر خوش حال میشیم.
یادم نره بگم : تابع setTimeout (به حروف توجه کنید) یه تابع می گیره و تیکه زمانی که تو اون زمان یه بار (و البته فقط برای یک بار) تابع ما رو اجرا میکنه.
من برای اینکه تابع رو همیشه اجرا کنه گذاشتمش توی خود تابع و به این صورت میشه گفت یه حالت حلقه درست کردم.

منبع : مهرآرین - لینک مطلب
 

جدیدترین ارسال ها

بالا