تغییر پس زمینه تگ DIV با افکت انیمیشن توسط jQuery

شنبه 16 خرداد 1394

در این مقاله نحوه تغییر پس زمینه تگ DIV با افکت انیمیشن توسط جی کوئری را خواهیم آموخت . jQuery یک کتابخانه استاندارد و آماده شامل تعدادی متد و توابع نوشته شده به زبان JavaScript می باشد به طور کلی با استفاده از این متدهای از پیش تعریف شده ، می توانید تغییراتی را در عناصر و تگ های HTML ایجاد کرده و یا نحوه نمایش آنها را تغییر دهید .

تغییر پس زمینه  تگ DIV با افکت انیمیشن  توسط jQuery

افکت ها در jQuery یکی از مهمترین و پرکاربردترین قابلیت ها در این زبان هستند که به طراحان وب امکانات گسترده و جذابی را می دهند . افکت ها jQuery شامل تعدادی متد از پیش تعریف شده هستند که برای مثال به شما امکان می دهند عناصر مورد نظر خود را مخفی و نمایان کرده و یا نحوه نمایش آن را تغییر دهید .

نرم افزار ویژوال استودیو را باز نمایید ، بعد وارد منوی File و سپسWeb Site<--New گزینهرا انتخاب کنید.

 

 

یک  ASP.Net Empty Web site ایجاد میکنیم:

در مرحله بعد ساختن یک صفحه html می باشد:

 

در صفحه HTML در تگ <DIV> تعدادی تصاویر در داخل پوشه ای به نام Images قراردادیم.نام همه تصاویر موجود در پوشه Images در یک آرایه جاوا اسکریپ ذخیره می شود. در سند جی کوئری موجود یک رویدادی را مدیریت می کند،اول شمارنده را مساوی صفر قرار می دهد و تصویر اول به عنوان تصویرپس زمینه در صفحه HTMLقرار میگیرد. با استفاده از متد setlnterval متغیر شمارنده افزایش می یابد و تصاویر بعدی را از Images به عنوان تصویر پس زمینه در صفحه HTML قرار می گیرد. بعد از آخرین تصویر دوباره متغیرشمارنده ازصفر شروع میکند.به تعداد بی نهایت تصاویرپس زمینه با محوشدن به ترتیب تغییر میکند.

کلیه دستورات به همراه تگ های موجود در صفحه Html را مشاهده نمایید:

<div id="dvImage" style="height: 308px; width: 410px">
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    var images = ["Chrysanthemum.jpg", "Desert.jpg", "Hydrangeas.jpg", "Jellyfish.jpg", "Koala.jpg", "Lighthouse.jpg", "Penguins.jpg", "Tulips.jpg"];
    $(function () {
        var i = 0;
        $("#dvImage").css("background-image", "url(images/" + images[i] + ")");
        setInterval(function () {
            i++;
            if (i == images.length) {
                i = 0;
            }
            $("#dvImage").fadeOut("slow", function () {
                $(this).css("background-image", "url(images/" + images[i] + ")");
                $(this).fadeIn("slow");
            });
        }, 1000);
    });
</script>



در قسمت کد بالا افکت ( ) fadeIn این افکت باعث می شود تا عنصر مورد اثر آن به تدریج از حالت مخفی به حالت نمایان در بیاید .این افکت در یک افکت تصویری با زیاد کردن نور عنصر به تدریج باعث نمایان شدن آن می شود .بدیهی است این افکت بر روی عناصری قابل اجراست که در ابتدا مخفی باشند .

کد افکت  ()fadeout این افکت باعث می شود تا عنصر مورد اثر آن به تدریج از حالت نمایان به حالت مخفی در بیاید .این افکت در یک افکت تصویری با کم کردن نور عنصر به تدریج باعث مخفی شدن آن از دید کاربر می شود .

 

خروجی برنامه به شکل زیر می باشد:

 

فایل های ضمیمه

نرگس محمدی

نویسنده 36 مقاله در برنامه نویسان
  • Jquery
  • 3k بازدید
  • 2 تشکر

کاربرانی که از نویسنده این مقاله تشکر کرده اند

در صورتی که در رابطه با این مقاله سوالی دارید، در تاپیک های انجمن مطرح کنید