چشمک زدن متن با جاوا اسکریپت

چشمک زدن متن در جاوا اسکریپت

به برخی از صفحات وب نگاه کنید؛ شاید مشاهده کرده‌اید که برای تاکید روی متون خاصی طراحان وب آن متن را به صورت چشمک زن استفاده می کنند.

چشمک زدن متن در HTML یک عمل غیر ممکن است زیرا این زبان تنها ساختاری استاتیک دارد و برای ایجاد ساختاری پویا در صفحات وب نیاز به جاوا اسکریپت دارید.

ابتدا به آخرین نسخه‌ی کتابخانه‌ی JQUERY نیاز دارید برای این‌کار به سایت JQUERY.COM بروید؛ برای دانلود آخرین نسخه‌ی کتابخانه‌ی JQUERY که شامل توابع و کدهای جدیدتر و بهینه‌تر است. به صفحه ی دانلود JQUERY رفته و از آنجا آخرین نسخه را دانلود کنید. برای راحتی کار از لینک‌های زیر نیز می‌توانید استفاده کنید. سپس برای اضافه کردن این کتابخانه به صفحه‌ی وب خود در بین تگ‌های head کد زیر را اضافه کنید.

<script type="text/javascript" src="jquery-3.2.0.min.js"></script>

در خصیصه ی src حتما آدرس دقیق فایل کتابخانه را وارد کنید. زیرا در کد بالا فرض بر این است که کتابخانه در کنار سند html ما قرار دارد. حالا برای اضافه کردن دستور چشمک زدن متن این کد را هم بین تگ‌های head خود اضافه کنید. سند html خود را ذخیره کنید.

<script>
   $(document).ready(function(){
      function moisrex(){
         $('.fade').fadeTo(200,0).fadeTo(200,1);
      }
      setInterval(
         function(){
            moisrex();
         } ,۰)
   });
</script>

کار تابع بالا به این شکل است که المانی که مقدار کلاس آن برابر fade است را در بازه‌ی زمانی ۲۰۰ میکروثانیه به طور چشمک زن خاموش و روشن کند. برای استفاده از کد بالا در هر جای سند html خود که قصد دارید متنی را به صورت چشمک زن نمایان کنید از کد زیر استفاده کنید.

<div class="fade">متن چشمک زن</div>

برای ساده‌‍تر شدن کار شما ساختار کله این سند به شکل زیر است:

<html>
   <head>
      <title>چشمک زدن متن با جاوااسکریپت</title>
      <script type="text/javascript" src="jquery-3.2.0.min.js"></script>
      <script>
         $(document).ready(function(){
            function moisrex(){
               $('.fade').fadeTo(200,0).fadeTo(200,1);
            }
            setInterval(
                function(){
                   moisrex();
                } ,۰)
            });
      </script>
   </head>

   <body>
      <div class="fade">متن چشمک زن</div>
   </body>
</html>

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

لینک دانلود : دانلود پروژه ی چشمک زدن متن با جاوااسکریپت

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

[کل: 0 میانگین: 0]