article

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

javascript-fade-color

در این یادداشت می خواهیم نحوه ایجاد افکت های رنگی زیبا و در عین حال سبک و کم حجم را با برنامه نویسی جاوا اسکریپت آموزش دهیم، افکت هایی که به صورت محو و آشکار شدن رنگ یا تحت عنوان Fadein و Fadeout شناخته می شوند و جلوه ی خاصی به سایت و وبلاگمان می دهند و به همین دلیل بین کاربران وب محبوبیت زیادی دارند، برای ایجاد این نوع امکانات برخی ترجیح می دهند به جای استفاده از زبان های مستقل و صرف (Pure) از توابع آماده در کتابخانه های جاوا اسکریپتی مانند جی کئوری (jQuery) و موارد مشابه استفاده کنند که بررسی معایب و مزایای این کار خود بحث مفصلی می طلبد، به هر صورت طبق روال توصیه های همیشگی هر کجا بتوانیم در منابع وب صرفه جویی کنیم و صفحاتی با حداقل حجم داشته باشیم بهتر است رو به فایل ها و روش های حجیم نیاوریم و صرفا در موارد ضروری و با سنجش جوانب کار از کتابخانه ها و فریم ورک های جایگزین استفاده کنیم، به هر صورت اگر مشتاق هستیم در کدنویسی های خود کمی از افکت های رنگی سبک و زیبا استفاده کنیم با ادامه این آموزش همراه باشید.

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


برای ایجاد جلوه افکت های رنگی در جاوا اسکریپت (JavaScript) چند تابع مورد نیاز است که هر کدام وظیفه انجام فرایند خاصی را بر عهده دارند، این توابع در نمونه کدهای زیر شامل تابع اصلی ایجاد افکت Fade (محو و آشکار شدن)، تابع تغییر از یک رنگ به رنگ دیگر و یک تابع کوچک دیگر برای تبدیل کد رنگی هگز به مقدار RGB آن است که در مجموع برای عملکرد صحیح برنامه مورد نیاز است:
<script>
// تابع اصلی برای ایجاد افکت محو و آشکار شدن
function colorFader(id, type, start, end, steps, speed){
    var startrgb, endrgb, er, eg, eb, rint, gint, bint;
    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, type, steps, er, eg, eb, rint, gint, bint);
    }, speed);
}

//تابع تغییر از یک رنگ به رنگ دیگر
function colorAnimation(id, type, 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(type == 'background'){
            target.style.backgroundColor = color;
        } else if(type == '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(type == 'background'){
            target.style.backgroundColor = color;
        } else if(type == 'border'){
            target.style.borderColor = color;
        } else{
            target.style.color = color;
        }
    }
}

//تابع تبدیل کد رنگی هگز به مقدات RGB آن
function colorConvert(color){
    var rgb;

    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 باعث خلق افکت های رنگی و اعمال آن روی عناصر HTML موجود در صفحه وب می شود.
- متد document.getElementById در تابع colorFader با توجه به آی دی تنظیم شده در هنگام فراخوانی تابع بلاک div هدف در صفحه را به شکل یک Object انتخاب کرده و به متغیر target نسبت می دهد تا در ادامه روند کار برنامه، پردازش و تغییرات روی آن اعمال شود.
- در قسمت steps و speed گام ها (تعداد فریم ها) و سرعت اجرای افکت محو و آشکار شدن برنامه تنظیم می شود، در صورتی که مقدار تنظیم نشود به صورت پیش فرض عدد 20 در نظر گرفته شده است.
- قسمت مربوط به setInterval به همراه timer در واقع تنظیم کننده ماشین زمانبندی برای تکرار اجرای تابع در فواصل زمانی مشخص هستند، با setInterval یک دوره تکرار زمانبدی شده شروع و با clearInterval آن دوره تکرار متوقف می شود.
- برای ایجاد افکت های رنگی در این توابع از مبنای مقادیر RGB (سه رنگ Red, Green, Blue) که به صورت مقدار عددی است استفاده شده است.
- قسمت Math.round و Math.abs برای ایجاد و گرد کردن اعداد جهت ساخت مقادیر رنگ های RGB استفاده می شود.
- قسمت مربوط به parseInt مقدار رشته ای (متنی) دریافتی را به عدد صحیح (Integer) تبدیل می کند، برای اطمینان از انجام صحیح محاسبات ریاضی در برنامه بهتر است مقادیر عددی از فیلتر این تابع عبور کنند.
- اعمال خروجی نهایی تابع در قالب متد target.style و متدهای زیرمجموعه آن که معادل خاصیت های CSS هستند صورت می گیرد و با توجه به عنصر هدف تنظیم شده هنگام فراخوانی یکی از متدهای borderColor، backgroundColor یا color قابل استفاده است که به ترتیب رنگ پس زمینه، رنگ خطوط حاشیه ای و یا رنگ متن را تغییر می دهند.
- برای در نظر گرفتن هر کدام از موارد بالا در هنگام فراخوانی تابع آرگیومنت دوم باید یکی از مقادیر background، border یا color باشد که به متغیر type نسبت داده می شود.
- قسمت مربوط به substring با تجزیه و تغییر بخشی از مقادیر دریافتی در نهایت اعدادی را به صورت کد رنگی RGB تولید می کند که در تابع colorFader مورد استفاده قرار می گیرد.

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


همان طور که گفتیم کدی که در بالا قرار داده ایم می تواند بر روی سه حالت یک عنصر در صفحات HTML تاثیر گذار باشد، البته سه حالت صرفا جهت نمونه است و اگر کمی با جاوا اسکریپت آشنایی داشته باشیم می توانیم کد را ویرایش کرده و در صورت نیاز حالت های دیگر نیز تعریف کنیم، سه حالت فعلی کد شامل رنگ پس زمینه (Background)، رنگ خطوط حاشیه ای (Border) و رنگ متن، لینک و...(Color) است که بدین منظور از متد style و متدهای زیرمجوعه آن در جاوا اسکریپت استفاده می کنیم، با متد style می توانیم یک ویژگی را در CSS به عنصر هدف در صفحات وب نسبت دهیم و به عبارتی از CSS به صورت تعاملی و مبتنی بر رویداد استفاده کنیم، برای آشنایی بیشتر با نحوه کاربرد تابع colorFader در زیر به چهار حالت مختلف تابع را تنظیم و فراخوانی کرده ایم.

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


یک روش استفاده از تابع colorFader تغییر رنگ پس زمینه به رنگ دلخواه است که در نمونه کد زیر از این شیوه استفاده کرده ایم:
<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 برای فراخوانی خودکار تابع استفاده کرده ایم، در این حالت با بردن ماوس روی بلاک رویداد onmouseover اجرا و تابع فراخوانی می شود و با خارج کردن ماوس رویداد onmouseout اجرا و تابع مجدد اجرا شده اما با توجه به آرگیومنت هایی که در نظر گرفته ایم رنگ پس زمینه به حالت اولیه برمی گردد، همان طور که مشخص است ویژگی 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) تغییر نماید، همان طور که مشخص است رویداد onclick را برای این هدف در نظر گرفته ایم.

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


با متد جاوا اسکریپتی style می توانیم خاصیت های CSS دلخواه را بر روی عناصر HTML در صفحات وب اعمال کنیم، یکی از این خاصیت های پرکاربرد Border یا خطوط حاشیه است که در نمونه کد زیر با تنظیم آرگیومنت دوم تابع colorFader به صورت مقدار bordr انجام شده است:
<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 اجرا شده و با توجه به مقادیر در نظر گرفته شده برای آرگیومنت تابع رنگ ها به حالت اولیه بازگشت می کنند.

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


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

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


در زیر کد کامل تابع و پیش نمایشی از آن را به صورت آنلاین می توانیم تست و بررسی کنیم:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | ایجاد افکت های رنگی با جاوا اسکریپت</title>
<!-- Webgoo.ir -->
<style>
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 src="colorfader.js?ver=12j83ydhr"></script>
</head>
<body>
<noscript>
جاوا اسکریپت در مرورگر شما غیر فعال است!
</noscript>

<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" onmouseover="colorFader('example-3', 'border', '000000', 'd8e6ee', 25, 30)" onmouseout="colorFader('example-3', 'border', 'd8e6ee', '000000', 25, 30)">برای دیدن عملکرد افکت، ماوس را بر روی این بلاک اندکی نگهدارید.</div>
<br>
<div id="example-4">
<a href="#" onclick="colorFader('example-4', 'color', '000000', 'cccccc', 50, 15);">با کلیک بر روی لینک، افکت در بلاک example-4 اجرا می شود</a>
[<a href="#" onclick="colorFader('example-4', 'color', 'cccccc', '000000', 50, 15);">حالت پیش فرض</a>]
<br>
بعد از کلیک، رنگ این متن تغییر می کند.
</div>
</body>
</html>
پیش نمایش آنلاین
sectionدسته بندی: آموزش کاربردی » JavaScript
related مطالب بیشتر:
» کنترل و تغییر اندازه فونت صفحه با جاوا اسکریپت
» نمایش پیام صفحه در حال بارگذاری با جاوا اسکریپت
» استفاده ترکیبی از جاوا اسکریپت (JavaScript) و PHP
» اعتبار سنجی فرم های وب با جاوا اسکریپت
» ساخت پنل چند سربرگی (Tabbed Panel) با جاوا اسکریپت و CSS
commentنظرات (۱۴ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: حسین
۲۱:۴۶ ۱۳۹۱/۰۹/۰۶
افکت اولی رو میشه تو سی اس اس با استفاده از 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>
function changeStyle(id){
var elm = document.getElementById(id);
elm.style.fontSize = '20px';
elm.style.color = 'red';
}
</script>
<input id="test" type="button" value="test" onclick="changeStyle(this.id);">
2- علامت || به معنی یای منطقی (Logical) است، در این حالت اگر steps دوم برابر false باشد، مقدار پیش فرض یعنی 20 به متغیر steps تعلق می گیرد، تابع clearInterval درونی و در خود مفسر جاوا اسکریپت وجود دارد، با این تابع چرخه تکرار در فواصل زمانی مشخص ایجاد می کنیم.
3- بله، در صورتی که بخواهیم به آنها در هر کجا از کدهایمان دسترسی داشته باشیم (Global Scope).
سایت در آینده مجددا به روز خواهد شد، فعلا در حال ایجاد تغییراتی هستیم که مدت نچندان کوتاهی تا عملیاتی شدن طول خواهد کشید!
نویسنده: کاربر مبتدی js
۲۲:۵۰ ۱۳۹۳/۰۶/۱۳
خیلی متشکرم از شما بخاطر پاسخ ها.
ما بی صبرانه منتظر سایت جدید هستیم.
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- موارد غیرمرتبط با مباحث آموزش ها را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ مختصر داده خواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- از درج عناوین تبلیغاتی در فیلدها خودداری کنید، در صورتی که یادداشت تبلیغاتی تشخیص داده شود حذف خواهد شد.
- تمام یادداشت ها بررسی و زمانی جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد خودداری کنید.





3 × 4
 refresh

آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
form بنیامین
در:
درود. وقت بخیر. من یک سوالی از خدمتتون داشتم؟ من می خوام وقتی کاربر بنویسه بدون اینکه URL تغییر کنه. و اینکه چطوری بعد...
۱۳۹۹/۱۱/۰۷

form مهدی
در:
خیلی ممنون آموزش خیلی خوبی بود
۱۳۹۹/۱۱/۰۷

form علی
در:
سلام تشکر میکنم از شما و سایت فوق العاده عالی تون مشکلم حل شد تشکر میکنم موفق باشید
۱۳۹۹/۱۱/۰۵

form rofa
در:
سلام خسته نباشید خیلی ممنونم از مطالب خوبتون.. ببخشید علامتی که در سمت راست همین سایت هستش چجوری تغییر جهت میده با اسکرول کردن...
۱۳۹۹/۱۱/۰۵

form علی
در:
با سلام تشکر از سایت خوبتون و اموزشای خوبی که قرار میدین یک سوال داشتم من میخوام از یک فایل رشته ای همانند :...
۱۳۹۹/۱۱/۰۵

form علی
در:
با سلام سایت هایی من میخوام اطلاعاتی از سایتی بگیرم اما این سایت پس از چند ثانیه این اطلاعات رو به من نشون میده و...
۱۳۹۹/۱۱/۰۴

form شیدا
در:
سلام برای اینکه بتونم جدول ضرب 1 در 5 رو بنویسم چه کدهایی باید بنویسم؟
۱۳۹۹/۱۱/۰۳

form امیرحسین
در:
چرا استاد خیلی فرق داره الان کد زیر را شما در نظر بگیرید بین 0 تا 1 ثانیه طول میکشه اجرا شدنش خب شما...
۱۳۹۹/۱۱/۰۲

form امیرحسین
در:
سلام استاد حالتون چطوره، من یه سوال داشتم: تو پروژه های بزرگ که یک ارایه معمولا 20 عنصری یا نهایت 100 عنصری داشته باشیم...
۱۳۹۹/۱۱/۰۲

form کوثر رحیمی
در:
سلام ا ز راهنماییتون ممنونم من تازه وبلاگم رو درست کردم ۱۲ سالمه هر کاری می کنم فیلم در اون قرار نمیگیره همش این خطا...
۱۳۹۹/۱۰/۲۹

form متین
در:
سلام و خسته نباشید من بخوام داده ای که از قبل موجوده رو با متد پست به یک فایل ارسال کنم چجور میشه؟ یعنی...
۱۳۹۹/۱۰/۲۷

form روشنا
در:
سلام ما یه وبلاگ گروهی داریم مختص املاک فایل های جدید و حتی قالب جدید اصلا اعمال نمیشه . حتی راهنمایی که کرده...
۱۳۹۹/۱۰/۲۷

form علی
در:
من در یک سایت سازی سایت ساختم یه بخش داره به نام اسکریپت دلخواه می خوام یه اسکریپتی بذارم که مثلا یه موسیقی وقتی کاربر...
۱۳۹۹/۱۰/۲۷

form امیرحسین
در:
بله استاد خیلی ممنون، نمیدونستم خودش Optimize رو انجام میده در کل من بعد از ایندکس گذاری ها همیشه سعی کردم جوری که با...
۱۳۹۹/۱۰/۲۶

form امیرحسین
در:
ُسلام وقت بخیر این کووری هم چون اول قسمت WHERE انجام میشه بعد قسمت ON پس این کووری هم با حالت کووری قبلی برابره
۱۳۹۹/۱۰/۲۶
form امیرحسین
در:
سلام استاد وقت بخیر ممنون از پاسخ گویی های قبلی یه سوال دیگه داشتم: این هم هیچ مشکلی نداره و کار میکنه، ایا...
۱۳۹۹/۱۰/۲۵
form محمد بیدل بازه
در:
سلام خسته نباشید ببخشید من توی یک قسمت سایتم تصویری دارم و میخوام سمت راست اون تصویر متن بنویسم ولی نمیشه تا متن رو...
۱۳۹۹/۱۰/۲۵
form سلام
در:
و اینکه یه تگ خوب برای فونت معرفی کنید و یه تگ دیگه که متن رو (تیتر مطلب (تست)) در ادامش بنویسه نه اینکه...
۱۳۹۹/۱۰/۲۴
form سلام
در:
سلام وبسایتم را نگاه کنید از چه تگی استفاده کنم تا فاصله بین تیتر مطلب جدید را کاهش دهم؟ (از خطی به خط...
۱۳۹۹/۱۰/۲۴
form وطن
در:
سلام. خسته نباشید. خیلی گشتم درباره یک خطا یا ایراد فنی که چند روز هست در سایت نوشته شده با پی اچ پی (اسکریپت اولوشن)...
۱۳۹۹/۱۰/۲۴
form حورارمی
در:
سلام. من هنوز نمیدونم تو تنظیمات باید کجا رو بگردم تا قالب وبلاگم رو با عکس مورد علاقه ام تغییر بدم. یا نمیتونم...
۱۳۹۹/۱۰/۲۳
form راشد
در:
این روش خیلی طولانیه در فروشگاه من یک برنامه گرفتم که یه عکس توش اپلود کن بهت یک لینک میده در ظرف چند ثانیه و...
۱۳۹۹/۱۰/۲۱
form باسلام
در:
باسلام خدمت شما عزیز زحمت کش، من مطلب را تا آخر مطالعه کردم. من وبلاگم بازدیدای زیادی داره چون تمام مطالبش رو خودم مینویسم و...
۱۳۹۹/۱۰/۲۱
form محمود
در:
سلام و عرض ادب من در سایتم یک قسمت تب ایجاد کردم، متن ها را که در تب می نویسم پاراگراف بندی نمی شوند....
۱۳۹۹/۱۰/۲۱
form علی آقابیگی
در:
سلام خسته نباشید ببخشید من می خواستم کد جدید در وبلاگم بزارم بعد اشتباهی رفتم در قسمت ویرایش کدها و بعد بیشتر کدها را پاک...
۱۳۹۹/۱۰/۲۰
form محمد
در:
سلام. من میخوام با جاوا اسکریپت یک کدی بنویسم که وقتی کاربر روی یک دکمه ‏ای کلیک کرد، یک کد تصادفی برای شمارش ارسال...
۱۳۹۹/۱۰/۲۰
form پوریا
در:
سلام خسته نباشید، ممنونم بابت توضیحات خوبتون، یه مشکلی داشتم میخواستم ببینم امکانش هست راهنمایی کنید؟ فرض کنید یه اینطور متنی داریم: ...
۱۳۹۹/۱۰/۱۹
form seyedsobhanmansouri
در:
سلام خسته نباشید من سایتمو طراحی کردم اما به این مشکلات بر میخورم اول اینکه هدر سایتم نمایش داده نمیشه اصلا و بعد...
۱۳۹۹/۱۰/۱۹
form رضا
در:
سلام. ممنون بابت مطالب مفیدتون. این نوع جستجو به سئو سایت لطمه نمیزنه؟؟؟ چون در این مدل جستجو، مقدار impression میره بالا ولی...
۱۳۹۹/۱۰/۱۹
form mahdi
در:
سلام استاد عزیز ، پس بنظرتون بجای وقت گذاشتن برای یادگیری لاراول و وردپرس ، وقت بزارم که عمیق تر php و ساختار mvc...
۱۳۹۹/۱۰/۱۹
form علی
در:
سلام و ممنون بابت وبسایت عالیتون داخل بعضی سایت ها دیدید مثلا یه متنی شروع به تایپ شدن می کنه و وقتی کامل شد...
۱۳۹۹/۱۰/۱۸
form محمد
در:
سلام خدمت شما دوست عزیز سوالم این بود میخاستم چندتا مثال از این تابع و چند تابع دیگه از خودتون رو برام مثال بزنید...
۱۳۹۹/۱۰/۱۸
form محمود رنجبر
در:
سلام برادر مشکل من تو همین سایتی هست که فرستادم وقتی گزینه خانه رو کلیک میکنم و بعد دکمه بک گوشی رو میزنم بالای صفحه...
۱۳۹۹/۱۰/۱۷
form mahdi
در:
سلام استاد عزیز ، بعد از آموزس php با لاراول کار کنیم بهتره ؟
۱۳۹۹/۱۰/۱۶
form رضا
در:
آدرس رو براتون گذاشتم دامنه قبلا روی یه وبلاگ میهن بلاگ بود چند ماه میشه که از میهن بلاگ خداحافظی کردم ولی هنوز که هنوزه...
۱۳۹۹/۱۰/۱۴
form نیلو
در:
سلام... ببخشید بعد طراحی قالب قالب شیشه ایم هست یا نه؟؟؟
۱۳۹۹/۱۰/۱۳
  در انتظار بررسی: ۰
 پاسخگویی به سوالات ممکن است تا 24 ساعت زمان ببرد.