عضو کانال یوتیوب ما شوید.

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

جاوا اسکریپت
جاوا اسکریپت

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

به برخی از صفحات وب نگاه کنید؛

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

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

 

در این آموزش به شما یاد خواهیم داد تا بتوانید متنی چشمک زن را در صفحات وب ایجاد کنید.

همچنین بتوانید روی بخش هایی که قصد تاکید دارید جلوه ی بیشتری ببخشید.

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

 

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

ابتدا به آخرین نسخه ی کتابخانه ی JQUERY نیاز دارید برای اینکار به سایت  JQUERY.COM بروید؛

برای دانلود آخرین نسخه ی کتابخانه ی JQUERY که شامل توابع و کدهای جدیدتر و بهینه تر می باشد

به صفحه ی دانلود JQUERY رفته و از آنجا آخرین نسخه را دانلود کنید.

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

لینک ها : سایت 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]