illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

نمایش یک باکس تنها در پایین صفحه توسط jQuery

4719 ۳ بهمن ۹۲

بنام یگانه هستی بخش.

سلام.امروز با آموزشی کاربردی همراه شما هستیم.

دمو

 همونطور که دیدید وقتی به قسمتی از صفحه میرسید ، باکسی از سمت راست صفحه ظاهر میشه.یه ترفند ساده با جی کوئریه.خب بریم سراغ کد هاش.

HTML : (یادتون نره کتابخانه ی جیکوئری رو حتما فراخوانی کنید وگرنه کد جی کوئریمون کار نمیکنه)

همونطور که دیدید کد های HTML ، شامل 2 تا دایو(div) بود.که در دایو اول متن مورد نظر رو مینویسیم و دایو دوم هم ، باکسی هست که از سمت راست صفحه ظاهر میشه. اگه دقت داشته باشید به یکی از پاراگراف ها (خط 15) آی دیه "important" رو دادیم.

CSS :

این استایل بخش متن ها بود و توضیح خاصی هم نداره.فقط در خط 15 گفتیم : سطر اول پاراگرافی با آی دیه important قرمز رنگ باشه.

این هم استایل باکسمون هست.اگه دقت کنید برای اینکه باکسمون پنهان باشه از position استفاده کردیم(خط نهم).

خب بریم سراغ مهم ترین بخش یعنی کد جی کوئری.

jQuery :

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

در خط سوم با تابع on تعیین کردیم که وقتی صفحه اسکرول شد، کد های داخل تابع on انجام بشن.

در خط چهارم هم توسط دستور if ، گفتیم اگه مقدار فاصله ای که از بالای صفحه اسکرول کردیم بیشتر از مقدار متغیر important بود(یعنی کاربر با اسکرول کردن به اون پاراگراف رسیده و اون رو میبینه)،اون باکسمون از سمت راست خارج شه و در دید قرار بگیره وگرنه در سمت راست و دور از دید قرار بگیره.

در خط 10 هم گفتیم وقتی روی عنصری با آی دیه close(همون ضربدر گوشه ی باکس) کلیک شد،ابتدا اون باکسمون با افکتی پنهان بشه بعد هم که کلا پاک بشه.

همین.میتونید دمو رو از اینجا دانلود کنید.

موفق باشید؛یا علی

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 9 دیدگاه برای این مطلب ارسال شده است. نظردهی برای این مطلب بسته شده است .

  • ‏‏
    N a S e R(۳ بهمن ۱۳۹۲)

    بسیار عالی و کاربردی ❓

  • ‏‏
    مهشاد کلانتری(۴ بهمن ۱۳۹۲)

    خیلی عالی بود

  • ‏‏
    eyebrine2(۴ بهمن ۱۳۹۲)

    بد نبود …

    با تشکر

  • ‏‏
    حسین محمدی(۴ بهمن ۱۳۹۲)

    خیلی عالیه
    این آموزشهای کوچیک ولی کاربردی قدرت تجزیه و تحلیل فوق العاده ای به کسانی که دارند جی کوئری رو یاد می گیرند میده…

  • ‏‏

    سلام خیلی با حال بود . دستتون درد نکنه . راستی چه جوری میشه اون رنگ زرد رو تغییر داد

  • ‏‏

    ببخشید رنگ نارنجی کنار

  • ‏‏

    پیدا کردم درست شد رنگش رو عوض کردم

  • ‏‏
    حسین بلالی بیدگلی(۴ بهمن ۱۳۹۲)

    عالی بود

  • ‏‏
    Paria RVN(۷ بهمن ۱۳۹۲)

    جالب بود ممنون

  • ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram