امتیاز موضوع:
  • 1 رأی - میانگین امتیازات: 5
  • 1
  • 2
  • 3
  • 4
  • 5
آموزش ایجاد تبلیغات در گوشه سایت با CSS و jQuery
نویسنده پیام
Ghoghnus آفلاین
مدیر بخش
*****

ارسال‌ها: 1,474
موضوع‌ها: 259
تاریخ عضویت: آذر ۱۳۸۸

تشکرها : 1643
( 3907 تشکر در 1435 ارسال )
ارسال: #1
آموزش ایجاد تبلیغات در گوشه سایت با CSS و jQuery
در برخی سایت ها دیده اید که تبلیغی در سمت راست یا چپ (بالای سایت) به صورت Flash قرار داده شده است و به محض نگه داشتن موس بر روی تبلیغ, به صورت برگه ای کنار زده می شود و تبلیغ به صورت کامل دیده می شود. در این مطلب قصد داریم نحوه ساخت چنین سیستمی با استفاده از jQuery و CSS را به شما آموزش دهیم.

در مرحله اول در قسمتی که قرار است تبلیغ نمایش داده شود کد div مورد نظر را قرار می دهیم

pageflip قالب کلی تبلیغ و msg_block برای نمایش تبلیغ هنگامی که موس بر روی تبلیغ قرار میگیرد می باشد
مرحله اول: کد نمایش تبلیغ

فایل subscribe.png تصویر تبلیغ شما می باشد که شما میتوانید تصویر دلخواه خود را قرار دهید.

کد:
<div id="pageflip">
    <a href="#">
        <img src="page_flip.png" alt="" />
        <span class="msg_block">Subscribe via RSS</span>
    </a>
</div
مرحله دوم: ایجاد CSS
کد:
#pageflip {
    position: relative;
}
#pageflip img {
    width: 50px; height: 52px;
    z-index: 99;
    position: absolute;
    right: 0; top: 0;
    -ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
    width: 50px; height: 50px;
    position: absolute;
    z-index: 50;
    right: 0; top: 0;
    background: url(subscribe.png) no-repeat right top;
    text-indent: -9999px;
}

مرحله سوم: جی کوئری

در ابتدا آخرین نسخه جی کوئری را در قالب خود قرار می دهیم. سپس با استفاده از شناسه class مشخص میکنیم که اندازه تصویر برای نمایش چند پیکسل باشد

کد:
<script type="text/javascirpt" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascirpt">
$(document).ready(function(){

//Page Flip on hover

    $("#pageflip").hover(function() {
        $("#pageflip img , .msg_block").stop()
            .animate({
                width: '307px',
                height: '319px'
            }, 500);
        } , function() {
        $("#pageflip img").stop()
            .animate({
                width: '50px',
                height: '52px'
            }, 220);
        $(".msg_block").stop()
            .animate({
                width: '50px',
                height: '50px'
            }, 200);
    });

});
</script>

[تصویر:  a.jpg]

باور کنیم
همانگونه که در غیبت مقصریم در ظهور موثریم!
نیستیم؟

زیر شمشیر غمش رقص کنان باید رفت #  کان که شد کُشته ی او نیک سرانجام افتاد



 چشمک - بهینه شده برای ورژن جدید دانلود پروژه برنامه نويسي
۲۷-آذر-۱۳۹۲, ۱۸:۳۶:۱۳
وب سایت ارسال‌ها
پاسخ
تشکر شده توسط : Ambassador, babyy, lord_viper


موضوعات مرتبط با این موضوع...
موضوع نویسنده پاسخ بازدید آخرین ارسال
Question [سوال] ساخت آرایه نامحدود در jquery crafcrab 1 1,534 ۳۰-تير-۱۳۹۵, ۲۲:۴۲:۲۳
آخرین ارسال: babyy
  آموزش css از سیر تا پیاز amoozesh-sara.i 67 13,949 ۲۱-مهر-۱۳۹۴, ۲۳:۵۲:۱۳
آخرین ارسال: amoozesh-sara.i
  باز شدن سایت با مرورگر خاص Ghoghnus 2 1,725 ۲۵-خرداد-۱۳۹۳, ۱۱:۲۱:۰۴
آخرین ارسال: PouriaAmid
  گرد کردن گوشه ها در CSS3 hamed_Arfaee 1 1,368 ۲۳-فروردین-۱۳۹۳, ۰۱:۴۰:۰۷
آخرین ارسال: hamed_Arfaee
  [آموزشی] استفاده از google map در سایت lord_viper 8 6,557 ۲۲-آذر-۱۳۹۲, ۲۳:۵۳:۳۰
آخرین ارسال: babyy
  CSS3 & jQuery folder tabs Ghoghnus 0 1,369 ۱۹-آذر-۱۳۹۲, ۲۰:۳۲:۴۶
آخرین ارسال: Ghoghnus
Question کمک در ایجاد وقفه در تابع روز شمارم crafcrab 20 8,401 ۰۲-شهریور-۱۳۹۲, ۱۶:۰۰:۳۰
آخرین ارسال: crafcrab
Question [سوال] تغیر تصویر با jquery و animation crafcrab 4 2,946 ۱۱-مرداد-۱۳۹۲, ۱۰:۱۱:۳۰
آخرین ارسال: lord_viper
  [آموزشی] CSS Reset چیست و چه کاربردی دارد؟ lord_viper 0 2,521 ۰۹-مرداد-۱۳۹۲, ۱۱:۱۹:۵۶
آخرین ارسال: lord_viper
  jquery - کمک - تابع crafcrab 5 3,824 ۱۷-تير-۱۳۹۲, ۲۰:۰۰:۱۹
آخرین ارسال: babyy

پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 1 مهمان

صفحه‌ی تماس | IranVig | بازگشت به بالا | | بایگانی | پیوند سایتی RSS