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

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



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!
12 2165 ۲۹ بهمن ۹۳ محمد اسفندیاری

در این مطلب چهارمین افکت برای Click رو در اختیارتون میزارم.

میبینید که هر روی دایره کوچکی که موجوده ، کلیک کنید ، یک افکت زیبا رخ میده.

کدهای HTML :

کدهای CSS :

کدهای Javascript :

در این مطلب از classie.js‌ استفاده شده است.

امیدوارم خوشتون اومده باشه.

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

Source

نوع کد رايگان

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

  • ‏‏

    سلام
    عالی و کاربردی بود، ممنونم.
    یک سوال هم داشتم ازتون:
    من یک آزمون میخوام طراحی کنم که هر سوال چهار تا 7 گزینه داره، هر یکی از گزینه ها یک نمره داره که میخوام با کلیک کاربر روی هر جواب نمره ی اون جواب با جواب های بعدی جمع بشه و در اخر که سوال ها تموم شد در سه بازه (یا حتی بیشتر) عباراتی به کاربر نمایش بده.
    مثلا 0تا 10 نمایش بده: خوب
    11 تا 20 : متوسط
    21 تا 30: بد
    و…

    ممنون میشم راهنمایی کنید که به چه روشی بنویسم.
    اگر منبع آموزشی هم معرفی کنید که عالی میشه

    • ‏‏
      محمد اسفندیاری(۱ اسفند ۱۳۹۳)

      ابزارهای از پیش ساخته شده ای در وب وجود داره که میتونین از اونا استفاده کنید ، بعنوان مثال :
      https://www.onlinequizcreator.com/
      ببینید این بدردتون میخوره یا نه. اینم یه مثال عملی از ابزار بالایی هست :
      https://www.onlinequizcreator.com/quiz-99
      موفق باشید

      • ‏‏

        سلام
        ممنون از سایتی که معرفی کردید.
        ولی من میخوام روی هاست خودم این کار را انجام بدم

        • ‏‏
          محمد اسفندیاری(۱ اسفند ۱۳۹۳)

          این چطوره :
          http://rasekhoon.net/software/show/550751/%20%D8%A2%D8%B2%D9%85%D9%88%D9%86%20%D8%B3%D8%A7%D8%B2%20%DA%A9%D8%A7%D9%85%D9%84%D8%A7%20%D9%81%D8%A7%D8%B1%D8%B3%DB%8C%20%D9%88%20%D8%B1%D8%A7%DB%8C%DA%AF%D8%A7%D9%86%20%D8%AA%D8%B3%D8%AA%D8%A7%202.0%20Testa%202.0%20Released/

  • ‏‏

    ممنون
    نه متاسفانه
    من میخوام برای هر جواب یک عدد داشته باشم، یعنی هر جواب در نتیجه تست تاثیر داره

    • ‏‏
      محمد اسفندیاری(۱ اسفند ۱۳۹۳)

      اگه بخواین خودتون بنویسید ، اول که باید ظاهرش رو بسازید ، بوسیله HTML و CSS و Javascript و …
      بعد از اون باید از زبون سمت سرور مثل PHP و یا … استفاده کنید…..باید یک جلسه یا session درست کنید و در هر صفحه امتیاز مورد نظر رو به اون اضافه کنید
      اگه کمک بیشتر میخواید باید در انجمن مطرح کنید
      موفق باشید

  • ‏‏

    سلام و درود
    با تشکر از مطالب خوبتون
    یک سوال داشتم که اگه بندرو راهنمایی بفرمایین ممنون میشم
    این کدهارو در کدام قسمتهای سایت باید کپی پیست کرد
    من از مدیریت محتوای جوملا استفاده می کنم و می خواهم بدانم برای اینکه همچین دکمه ای ایجاد کنم باید به چه صورت عمل کنم
    ممنون از جواب شما
    با تشکر

    • ‏‏
      محمد اسفندیاری(۲ اسفند ۱۳۹۳)

      ببینید در ابتدا به اون المنتی در کدهای HTML که میخواین این افکتو داشته باشه ، کلاس cbutton–effect-sanja و cbutton رو اضافه کنید
      بعد از اون کدهای CSS در فایل CSS قرار بدین و Save کنید
      کدهای Javascript هم باید به فایل javascript قبلی اضافه کنید و یا اگه موجود نیست ، یک فایل بسازید
      موفق باشید

  • ‏‏

    ممنون از جواب سریع شما
    دوست عزیز بنده با استفاده از html سفارشی در جوملا می خواهم یک دکمه خلق کنم
    نه این همچین خاصیتی و بهش بدم

    • ‏‏
      محمد اسفندیاری(۲ اسفند ۱۳۹۳)

      من خیلی با جوملا آشنایی ندارم…….ولی همین قدر میتونم کمکتون کنم که ، باید این کدهای CSS که موجود هستنو به یک طریقی به المنت مورد نظرتون نسبت بدین
      موفق باشید

  • ‏‏
    iripb iranipb(۲ اسفند ۱۳۹۳)

    با سلام
    در پنل مدیریت جوملا به قسمت مدیریت ماژول ها رجوع کنید و روی دکمه ماژول جدید کلیک نمایید از انواع ماژول های ظاهر شده مدل html دستی را انتخاب کنید
    حال می توانید کد مورد نظر را در ادیتور وارد نمایید
    سپس یک موقعیت برای ظاهر شدن این ماژول در قالب خود برگزینید
    موفق باشید

  • ارسال دیدگاه

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram