parsgreen.com
article

ساخت افکت رنگی با جاوا اسکریپت (Javascript)

javascript-fade-color

در این مطلب می خواهیم نحوه ایجاد افکت های رنگی زیبا و در عین حال سبک و کم حجم را با برنامه نویسی به زبان جاوا اسکریپت آموزش دهیم، افکت هایی که به صورت محو و آشکار شدن رنگ و معمولا تحت عنوان Fade یا (fadein و fadeout) شناخته می شوند و بین کاربران محبوبیت زیادی نیز دارند، چرا که جلوه ی خاصی به سایت یا وبلاگشان می دهد، البته برخی نیز ترجیح می دهند از توابع موجود در کتابخانه های جاوا اسکریپتی (مثل جی کئوری jQuery و موارد مشابه) بدین منظور استفاده کنند که این کار لااقل برای مخاطبان با سرعت و کیفیت اینترنت پائین یک عیب عمده محسوب می شود، از طرفی وقتی می توانیم در منابع وب صرفه جویی کنیم و صفحاتی با حداقل حجم داشته باشیم، لزومی ندارد رو به فایل ها و روش های حجیم تر بیاوریم، به هر حال اگر مشتاق هستید در کدنویسی های خود، کمی از افکت های رنگی سبک و زیبا استفاده کنید، با ادامه این آموزش همراه ما باشید.

توابع ایجاد افکت رنگی در جاوا اسکریپت


قبل از هر چیز به چند تابع در بستر زبان جاوا اسکریپت (Javascript) نیازمندیم که بتواند کار ایجاد افکت های رنگی را برایمان انجام دهند، در زیر سه تابع برای این مورد در نظر گرفته ایم که ملاحظه می کنید.
<script type="text/javascript">
// تابع اصلی برای ایجاد افکت محو و آشکار شدن
function colorfader(id,element,start,end,steps,speed){
    var startrgb,endrgb,er,eg,eb,step,rint,gint,bint,step;
    var target = document.getElementById(id);
    steps = steps || 20;
    speed = speed || 20;
    clearInterval(target.timer);
    endrgb = colorconvert(end);
    er = endrgb[0];
    eg = endrgb[1];
    eb = endrgb[2];
    if(!target.r){
        startrgb = colorconvert(start);
        r = startrgb[0];
        g = startrgb[1];
        b = startrgb[2];
        target.r = r;
        target.g = g;
        target.b = b;
        }
    rint = Math.round(Math.abs(target.r-er)/steps);
    gint = Math.round(Math.abs(target.g-eg)/steps);
    bint = Math.round(Math.abs(target.b-eb)/steps);
    if(rint == 0) { rint = 1 }
    if(gint == 0) { gint = 1 }
    if(bint == 0) { bint = 1 }
    target.step = 1;
    target.timer = setInterval(function(){ coloranimation(id,element,steps,er,eg,eb,rint,gint,bint)}, speed);
}
//تابع تبدیل یک رنگ به رنگ دیگر
function coloranimation(id,element,steps,er,eg,eb,rint,gint,bint){
    var target = document.getElementById(id);
    var color;
    if(target.step <= steps){
        var r = target.r;
        var g = target.g;
        var b = target.b;
    if(r >= er){
        r = r - rint;
    }else{
        r = parseInt(r) + parseInt(rint);
    }
    if(g >= eg){
        g = g - gint;
    }else{
        g = parseInt(g) + parseInt(gint);
    }
    if(b >= eb){
        b = b - bint;
    }else{
        b = parseInt(b) + parseInt(bint);
    }
    color = 'rgb(' + r + ',' + g + ',' + b + ')';
    if(element == 'background'){
        target.style.backgroundColor = color;
    }else if(element == 'border'){
        target.style.borderColor = color;
    }else{
        target.style.color = color;
    }
    target.r = r;
    target.g = g;
    target.b = b;
    target.step = target.step + 1;
  }else{
      clearInterval(target.timer);
      color = 'rgb(' + er + ',' + eg + ',' + eb + ')';
    if(element == 'background'){
        target.style.backgroundColor = color;
    } else if(element == 'border'){
        target.style.borderColor = color;
    } else {
        target.style.color = color;
    }
  }
}
//تبدیل رنگ هگز به صورت rgb
function colorconvert(color) {
  var rgb = [parseInt(color.substring(0,2),16),
    parseInt(color.substring(2,4),16),
    parseInt(color.substring(4,6),16)];
  return rgb;
}
</script>
توضیح:
هر چند توضیح کامل آنچه در این توابع اتفاق می افتد تا نهایتا افکتی زیبا داشته باشیم در یک مطلب نمی گنجد و قسمت به قسمت نیاز به آموزش است، اما بد نیست وقتی می خواهیم از کدی استفاده کنیم، با نوع برنامه نویسی آن نیز بیشتر آشنا شویم، به همین دلیل به طور مختصر به عناصر به کار رفته شده در توابع بالا و کاربرد آنها اشاره می کنیم.
- تابع اصلی کد ما، colorfader نام دارد که چندین مقدار به عنوان آرگومان (آرگومان به معنی مقادیری که به تابع به عنوان ورودی می دهیم) می پذیرد؛ این تابع در واقع با دریافت اطلاعاتی که ما در هنگام فراخوانی آن تنظیم می کنیم، با استفاده از دو تابع دیگر با نام های coloranimation و colorconvert باعث خلق افکت های رنگی و اعمال آن روی عناصر صفحه می شود.
- دستور document.getElementById در واقع آی دی تنظیم شده بلاک div، در هنگام فراخوانی تابع colorfader را در خود نگه می دارد و به متغیر target نسبت می دهد، تا در ادامه روند کار تابع، پردازش و تغییرات روی آن اعمال شود.
- در قسمت steps و speed، گام ها (تعداد فریم ها) و سرعت افکت محو و آشکار شدن تنظیم می شود.
- قسمت مربوط به clearInterval و setInterval به همراه timer، در واقع تنظیم کننده یک ماشین زمان سنج برای تابع جاوا اسکریپت هستند، با setInterval یک زمان شروع می شود و با  clearInterval آن زمان متوقف می گردد.
- برای ایجاد افکت های رنگی، از مقادیر rgb (سه رنگ red green blue) در این تابع استفاده شده است.
- از قسمت Math.round و Math.abs برای ایجاد کدهای اتفاقی جهت ساخت رنگ های rgb استفاده می شود.
- قسمت مربوط به parseInt یک مقدار رشته ای (متنی) را دریافت می کند و در عوض یک عدد صحیح برمی گرداند.
- خروجی توابع به صورت دستورات target.style.backgroundColor، target.style.borderColor و target.style.color عمل می کنند، که با توجه به element تنظیم شده هنگام فراخوانی تابع، یکی از مقادیر border، background یا color قابل اعمال است (یعنی بر روی بلاک یا متن مورد نظر، یکی از موارد گفته شده با اجرای تابع، تغییر می کند).
- قسمت مربوط به substring با تجزیه مقادیر، کدهای خاصی برای مقادیر رنگی به صورت rgb تعریف می کند که در تابع colorfader مورد استفاده قرار می گیرد.

فراخوانی توابع و ایجاد افکت


همان طور که گفتیم، کدی که در بالا قرار داده ایم می تواند بر روی سه حالت یک عنصر در صفحه تاثیر گذار باشد (البته اگر کمی با جاوا اسکریپت آشنایی داشته باشید، در صورت نیاز موارد دیگری نیز قابل افزودن است)، رنگ پس زمینه (backgroundColor)، رنگ خطوط حاشیه ای (border) و رنگ متن و لینک و...(color)؛ بدین منظور نیز از تگ style در جاوا اسکریپت استفاده می کنیم که باعث می شود یک ویژگی به عنوان استایل css به یک عنصر در صفحه اعمال شود، در زیر به چهار حالت مختلف توابع را تنظیم و فراخوانی کرده ایم.

تغییر خودکار رنگ پس زمینه


<div id="example-1" onmouseover="colorfader('example-1','background','ffffff','d8e6ee')" onmouseout="colorfader('example-1','background','d8e6ee','ffffff',25,50)">برای دیدن عملکرد افکت، ماوس را بر روی این بلاک اندکی نگهدارید.</div>
در اینجا از رویداد onmouseover و onmouseout و بلاکی با آی دی فرضی example-1 برای فراخوانی خودکار تابع استفاده کرده ایم، در این حالت با بردن ماوس روی بلاک، تابع اجرا می شود و با خارج کردن ماوس، تابع مجدد اجرا شده ولی رنگ ها به حالت اولیه برمی گردند، ملاحظه می کنید که ویژگی background در آرگومان تابع تنظیم شده است.

تغییر رنگ پس زمینه با کلیک کاربر


<div id="example-2">
<a href="#" onclick="colorfader('example-2','background','ffffff','e4cdcd',50,15);">با کلیک بر روی لینک، افکت در بلاک example-2 اجرا می شود</a> [<a href="#" onclick="colorfader('example-2','background','e4cdcd','ffffff',50,15);">حالت پیش فرض</a>]
<br />
بعد از کلیک، رنگ این بلاک تغییر می کند.
</div>
این بار به جای استفاده از رویداد onmouseover و onmouseout، کنترل اجرای تابع را به دست کاربر داده ایم تا هنگامی که بر روی لینک کلیک کرد، تابع جاوا اسکریپتی ما فراخوانی شده و رنگ پس زمینه بلاک (این بار با آی دی فرضی example-2) تغییر نماید.

تغییر رنگ متن با کلیک کاربر


<div id="example-3">
<a href="#" onclick="colorfader('example-3','text','000000','cccccc',50,15);">با کلیک بر روی لینک، افکت در بلاک example-3 اجرا می شود</a> [<a href="#" onclick="colorfader('example-3','text','cccccc','000000',50,15);">حالت پیش فرض</a>]
<br />
بعد از کلیک، رنگ این متن تغییر می کند.
</div>
در این مثال، با کلیک کاربر عنصر text را به عنوان آرگومان دوم تابع ارسال می کنیم، با این کار مقادیر target.style.color اجرا شده و تاثیر تغییر رنگ بر روی متن بلاک ظاهر می گردد.

تغییر رنگ خط حاشیه به صورت خودکار


<div id="example-4" onmouseover="colorfader('example-4','border','000000','d8e6ee',25,30)" onmouseout="colorfader('example-4','border','d8e6ee','000000',25,30)">برای دیدن عملکرد افکت، ماوس را بر روی این بلاک اندکی نگهدارید.</div>
در این حالت فراخوانی تابع، از ویژگی border به عنوان آرگومان و رویداد onmouseover و onmouseout استفاده کرده ایم، در این حالت وقتی کاربر ماوس را روی بلاک مورد نظر می برد، رنگ حاشیه یا border بر اساس مقادیر تنظیمی تغییر می کند و با خارج کردن ماوس، مقادیر رویداد onmouseout اجرا شده و رنگ ها به حالت اولیه بازگشت می کنند.

کد و پیش نمایش آنلاین


در زیر کد کامل تابع و پیش نمایشی از آن را به صورت آنلاین می توانید ملاحظه و بررسی کنید.
<!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>وبگو | افکت های رنگی با جاوا اسکریپت</title>
<!-- http://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
a{
    text-decoration:none;
    color:#06C;
}
a:hover{
    color:#999;
}
#example-1{
    display:block;
    height:50px;
    width:auto;
    border:1px solid #666;
    padding:4px;
}
#example-2{
    display:block;
    height:50px;
    width:auto;
    border:1px solid #666;
    padding:4px;    
}
#example-3{
    display:block;
    height:50px;
    width:auto;
    border:1px solid #666;
    padding:4px;    
}
#example-4{
    display:block;
    height:50px;
    width:auto;
    border:1px solid #666;
    padding:4px;    
}
</style>
<script type="text/javascript" src="colorfader.js"></script>
</head>
<body>
<div id="example-1" onmouseover="colorfader('example-1','background','ffffff','d8e6ee')" onmouseout="colorfader('example-1','background','d8e6ee','ffffff',25,50)">برای دیدن عملکرد افکت، ماوس را بر روی این بلاک اندکی نگهدارید.</div>
<br />
<div id="example-2">
<a href="#" onclick="colorfader('example-2','background','ffffff','e4cdcd',50,15);">با کلیک بر روی لینک، افکت در بلاک example-2 اجرا می شود</a> [<a href="#" onclick="colorfader('example-2','background','e4cdcd','ffffff',50,15);">حالت پیش فرض</a>]
<br />
بعد از کلیک، رنگ این بلاک تغییر می کند.
</div>
<br />
<div id="example-3">
<a href="#" onclick="colorfader('example-3','text','000000','cccccc',50,15);">با کلیک بر روی لینک، افکت در بلاک example-3 اجرا می شود</a> [<a href="#" onclick="colorfader('example-3','text','cccccc','000000',50,15);">حالت پیش فرض</a>]
<br />
بعد از کلیک، رنگ این متن تغییر می کند.
</div>
<br />
<div id="example-4" onmouseover="colorfader('example-4','border','000000','d8e6ee',25,30)" onmouseout="colorfader('example-4','border','d8e6ee','000000',25,30)">برای دیدن عملکرد افکت، ماوس را بر روی این بلاک اندکی نگهدارید.</div>
</body>
</html>
پیش نمایش
sectionدسته بندی: آموزش کاربردی » JavaScript
related مطالب بیشتر:
» اعتبار سنجی فرم های وب با جاوا اسکریپت
» نحوه ایجاد دکمه رفتن به بالای صفحه (go to top) با جاوا اسکریپت
» ساخت منوی آکاردئونی با جاوا اسکریپت و CSS
» ایجاد باکس جمع شونده با جاوا اسکریپت و دریم ویور
» استفاده ترکیبی از جاوا اسکریپت (JavaScript) و PHP
commentنظرات (۱۴ یادداشت برای این مطلب ارسال شده است)
نویسنده: حسین
زمان: ۲۱:۴۶:۵۴ - تاریخ: ۱۳۹۱/۰۹/۰۶
افکت اولی رو میشه تو سی اس اس با استفاده از transition نوشت و درست کرد، اما این چه تفاوتی با سی اس اس داره؟ اصلا فرق میکنه؟
پاسخ: 
خاصیت های مربوط به transition در css از نسخه 3 اضافه شده اند و لذا در برخی مرورگرها مانند اینترنت اکسپلورر پشتیبانی نمی شوند، اما کد حاضر از مقادیر rgb استفاده می کند که در تمام مرورگرها پشتیبانی می شود؛ نکته دوم اینکه معمولا موقعیت استفاده از جاوا اسکریپت و css با هم متفاوت است، جاوا اسکریپت یک زبان اسکریپت نویسی و تعاملی است و در موارد و موقعیت های زیادی می توان از آن استفاده کرد اما css با هدف ایجاد جلوه های بصری توسعه یافته و لذا محدود به آن است.
نویسنده: amin
زمان: ۱۷:۴۸:۳۱ - تاریخ: ۱۳۹۱/۱۱/۱۴
با سلام!
واقعا مجموعه ی تکی دارید!
1 سوال واسم پیش اومده و اونم اینه که چجوری میشه یک تمپلت از یک دایو داشته باشیم که مثلا بردر اون رنگ متغیری داشته باشه و هر موقع ماوس روی اون بیاد رنگش عوض بشه ؟
من این کار رو با 2 تا دایو مختلف انجام دادم اما همیشه اولین دایو رنگ عوض میکنه !!!!
مثلا :

<div id="example-1" onmouseover="colorfader('example-1','border','ffffff','01d8f8',25,30)"
onmouseout="colorfader('example-1','border','01d8f8','ffffff',25,30)">
Windows!
</div>
<div id="example-2" onmouseover="colorfader('example-2','border','ffffff','00de49',25,30)"
onmouseout="colorfader('example-2','border','00de49','ffffff',25,30)">
Android!
</div>
دو نوع دایو دارم و میخوام که پستهای سایت یکی از این دو نوع باشه اما همیشه اولین پست بردر اون رنگ عوض میکنه !!!!
امیدوارم منظورم رو رسونده باشم !!!
به امید موفقیت روزافزون
:)
پاسخ: 
سلام
از نظر لطف شما ممنونیم.
در مورد سوال، نحوه فراخوانی کدها مشکلی ندارد و طبق بررسی ما درست عمل می کند، شاید برای id دوم استایل css تعریف نکرده اید، یعنی border برای آن در استایل css در نظر نگرفته اید.
نویسنده: sh
زمان: ۲۰:۳۹:۱۴ - تاریخ: ۱۳۹۱/۱۲/۰۲
با سلام و تشکر از مطالب مفیدتون
یک سوال داشتم. من یک برنامه دارم مینویسم که یک پالت رنگ هست با زدن روی هر کدوم از رنگها اون رو ذخیره کنه و وقتی روی پس زمینه کلیک شد رنگ پس زمینه به رنگه ذخیره شده ما در بیاد. برای پالت رنگمم از تیبل استفاده کردم. یک فانکشن نوشتم ولی جواب نمیده اگر ممکنه کمکم کنید.
با تشکر
پاسخ: 
سلام
صرف طرح مسئله کافی نیست، برای راهنمایی درج نمونه کد لازم است.
نویسنده: فراز
زمان: ۱۹:۵۴:۳۸ - تاریخ: ۱۳۹۲/۰۵/۱۰
درود فراوان به خاطر زحمات بی دریغ و مطالب بسیار ارزشمندتان
نویسنده: فروغ
زمان: ۰۰:۵۳:۳۶ - تاریخ: ۱۳۹۲/۱۱/۱۱
واقعا سایت عالی دارید. دستتون درد نکنه.
نویسنده: فاطمه
زمان: ۰۱:۴۷:۰۵ - تاریخ: ۱۳۹۲/۱۱/۱۳
سلام. اول از همه از شما به خاطر سایت خوبتون تشکر می کنم. یه سوال دارم در رابطه با ساخت اسلاید شو تصویر با جاوا. من از این کد در سایتم استفاده کردم سوالم اینه که وقتی تصویرم به صورت اسلایدی به تصویر بعدی میره چطوری با حالت محو شدگی این کار رو بکنم منظورم اینه که یه دفعه نره عکس بعد. امیدوارم راهی باشه براش.
<img id="slide" src="1.jpg" name="slide" width="100%" height="400" align="top" />
<script type="text/javascript">
var element = document.getElementById("slide");
var duration = 1000;
var steps = 20;
function setOpacity(level){
element.style.opacity = level;
element.style.mozopacity = level;
element.style.khtmlopacity = level;
element.style.filter = "alpha(opacity=" + (level * 100) + ");";
}
function fadeIn(){
for(i = 0; i <= 1; i += (1 / steps)){
setTimeout("setOpacity(" + i + ")", i * duration);
}
}
var image1 = new Image();
image1.src = "1.jpg";
var image2 = new Image();
image2.src = "2.jpg";
var image3 = new Image();
image3.src = "3.jpg";
var step = 1;
function slideshow(){
if(!document.images){
return false;
}
fadeIn();
document.images.slide.src = eval("image" + step + ".src");
if(step < 3){
step++;
}
else{
step = 1;
}
setTimeout("slideshow()", 6000);
}
slideshow();
</script>
من این پروژه را باید واسه 2 شنبه تحویل بدم امیدوارم تا اون موقع کمکم کنید. ممنون
پاسخ: 
سلام
امکان نمایش تصویر با افکت محو شدن (fade in) به کدهای شما افزوده شد!
نویسنده: فاطمه
زمان: ۱۵:۰۵:۵۳ - تاریخ: ۱۳۹۲/۱۱/۱۳
بابت افکت fade in ممنون. عالی شد.
نویسنده: فرشته
زمان: ۰۱:۴۴:۱۹ - تاریخ: ۱۳۹۲/۱۱/۱۴
با سلام. من در سایتم از کد جاوا - برای وقتی که با ماوس روی یک تصویر میرم تا بزرگ بشه استفاده کردم ولی وقتی تصویر بزرگ می شه حالت تاری داره واضح نیست. شما می تونید مشکلم را حل کنید؟؟؟ ممنون
<style type="text/css">
.pic{
margin:0 auto;
display:block;
}
.pic:hover{
-webkit-transform:rotate(1deg) scale(2.05) skew(1deg) translate(10px);
-moz-transform:rotate(1deg) scale(2.05) skew(1deg) translate(10px);
-o-transform:rotate(1deg) scale(2.05) skew(1deg) translate(10px);
}
.pic{
margin: 10px;
border:solid #fff 7px;
box-shadow: 0 0 5px #999999;
border-radius:5px;
}
</style>
پاسخ: 
سلام
رفتار طبیعی این کد به همین شکل است! در واقع وقتی تصویر بزرگتر از اندازه واقعی آن نمایش داده می شود (بسته به کیفیت تصویر) ممکن است پیکسلی یا تار دیده شود.
نویسنده: علی
زمان: ۲۳:۴۹:۲۸ - تاریخ: ۱۳۹۲/۱۲/۰۱
بسیار خوب و ارزش مند است.
نویسنده: رها
زمان: ۱۸:۴۷:۵۷ - تاریخ: ۱۳۹۳/۰۴/۱۵
سلام
خسته نباشید
من چطور میتونم زمان اسلاید شدن هر اسلاید را شخصی سازی کنم مثلا یه اسلایدر دارم و میخوام زمانی که تصویر شروع به اسلاید میکنه تا زمانی که اسلایدش تمام میشه را خودم زمان بندی کنم و یا در مرحله بعدی میخوام وقتی یک تصویر در اسلایدر مثلا از راست به چپ شروع به اسلاید میکنه تا 70 درصد با یه سرعت اسلاید بشه و از 70 در صد تا 100 درصد یعنی 30 در صد با قیمانده با یک سرعت دیگه اسلاید بشه الان وقتی از duration استفاده میکنم اصلا تاثیری نداره
واقعا لطف بزرگی می کنید اگر راهنمایی کنید
با تشکر و ارزوی توفیق
سپاس
پاسخ: 
سلام
ارائه پاسخ دقیق به اینگونه سوالات ساده نیست! حتی با داشتن کدها معمولا نیاز به بررسی پیچیده و آزمایش و خطا است تا چند و چون کار مشخص شود، در واقع راه حل ساده و نسخه واحدی نمی توان برای ایجاد این حالت ارائه کرد، در ابزارهای موجود باید با توجه به نحوه برنامه نویسی فعلی راه حل ارائه شود، برای ساخت این ابزار از ابتدا نیز نیاز به اسکریپت نویسی مفصل است که واقعا ارزش زمان صرف کردن را ندارد، توصیه ما استفاده از کدها و نمونه های آماده نزدیک به سلیقه است!
نویسنده: رها
زمان: ۰۹:۳۱:۵۲ - تاریخ: ۱۳۹۳/۰۴/۱۶
سلام
ممنون از راهنمایی شما
اما فکر نمیکنم انقدرها هم پیچیده باشه
حتی مشکل تر از این را هم من در وبسایتم در اوردم - یعنی اسلایدر سه بعدی
اما بیشتر از اسلایدر های ساده خوشم میاد ولی نه زیاد ساده
به نظر من زمانبندی به این شیوه که عرض کردم میتونه در اسلایدر ها میتونه تنوع بسیار زیبایی را ایجاد کنه یعنی مثل اون چیزی که در کاشی های لایو ویندوز 8 وجود داره
زمان شروع تا 23% سرعت کم
از 23% تا 75% سریعتر
از 75% تا 100% بسیار ارام حرکت میکنه و این خودش یک نمای بسیار زیبا به یک اسلاید میده
من فقط نمیدونم چی باید سرچ بزنم به زبان انگلیسی
ممنون میشم کمک کنید که به این خاصیت در اسکریپت چی میگن به زبان انگلیسی تا با سرچ زدن پیداش کنم
با تشکر و ارزوی توفیق
شاد باشید
پاسخ: 
سلام
بستگی دارد چه توقعی از اسلایدرتان داشته باشید، گاهی با خاصیت های CSS3 هم می توان حالت مد نظر شما را ایجاد کرد، اما یک اسلایدر حرفه ای نیاز به کدنویسی حرفه ای و ترکیبی (جاوا اسکریپت و CSS) دارد، شاید این مطلب کمک کند:
http://sarasoueidan.com/blog/windows8-animations
نویسنده: رها
زمان: ۱۰:۴۴:۴۶ - تاریخ: ۱۳۹۳/۰۴/۱۷
سلام
آقا سپاس
همین قابلیت transform بود که باید درصد به درصد اضافه میشد واقعا لطف کردید کار سخت و پیچیده ای نبود فقط برای هر اسلاید باید به تعداد دلخواه ( از من 3 بار بود با 3 تا درصد متفاوت ) قابلیت transform تعریف میشد
لطف بسیار بزرگی کردید استد عزیز
شاد و پیروز و سربلند باشید
نویسنده: کاربر مبتدی js
زمان: ۱۳:۳۵:۳۶ - تاریخ: ۱۳۹۳/۰۶/۱۳
سلام.
سوال ١- اگر بخواهیم با کلیک بر روی یک دکمه هم بک گراند و هم رنگ متن اون تغییر کنه باید چه کدی بنویسیم؟ در واقع چطور می شود با یک رویداد چند تابع و یا یک تابع با آرگومان های متفاوت را اجرا کرد؟
سوال ٢- در کد زیر:
steps = steps || 20;
speed = speed || 20;
clearInterval(target.timer);
علامت || چه معنی دارد؟
و آیا clearInterval یک تابع داخلی است.
سوال ٣- آیا می شود متغیر ها را بدون var نوشت؟ اگر می شود در چه مواقعی؟
در ضمن آیا قصد بروز کردن سایتتون رو دارید. شما با بیان گیرایی که دارید بهترین آموزش ها رو در بین سایت های ایرانی ارائه داده اید. لطف کنید در مورد ساخت قالب های موبایل و تبلت هم مطالبی رو در سایت بگزارید.
پاسخ: 
سلام
1- می توانید در یک تابع، ID عنصر هدف را به عنوان آرگومان بگیرید و در متدهای مختلف تغییرات را روی آن اعمال کنید، مثال:
<script type="text/javascript">
function change(id){
var elm = document.getElementById(id);
elm.style.fontSize = '20px';
elm.style.color = 'red';
}
</script>
<input id="test" type="button" value="test" onclick="change(this.id);">
2- علامت || به معنی یای منطقی (Logical) است، در این حالت اگر steps دوم برابر false باشد، مقدار پیش فرض یعنی 20 به متغیر steps تعلق می گیرد.
3- بله، در صورتی که بخواهیم به آنها در هر کجا از کدهایمان دسترسی داشته باشیم (global scope).
سایت در آینده مجددا به روز خواهد شد، فعلا در حال ایجاد تغییراتی هستیم که مدت نچندان کوتاهی تا عملیاتی شدن طول خواهد کشید!
نویسنده: کاربر مبتدی js
زمان: ۲۲:۵۰:۵۱ - تاریخ: ۱۳۹۳/۰۶/۱۳
خیلی متشکرم از شما بخاطر پاسخ ها.
ما بی صبرانه منتظر سایت جدید هستیم.




more لطفا دقت کنید که یادداشت های زیر منتشر نشده و حذف خواهند شد:
- یادداشت های خارج از موضوع این مطلب.
- سوالات کلی، غیر ضروری و مشکلاتی که هیچ تلاشی برای رفع آن نکرده باشید.
- نظرات حاوی کدها و اسکریپت های خیلی طولانی (به طور مثال کد کامل قالب وبلاگ).

8 × 2
 refresh
آگهی
seonab.com
طراحی نرم افزار اندروید
رنگین کمان عکس
Ranginkamaan.com

آرشیو عکس های باکیفیت با موضوعات متنوع...