کد بالا و پایین پریدن باکسی زیبا با استفاده از جی کوئری

این کد با استفاده از jQuery حرکت می کند ، با css آرایش شده است و با html نمایان می شود.

این باکس زیبا طی یک ثانیه بالا می رود و طی 0.2 ثانیه پایین می افتد.

این کد را در head صفحه خود قرار دهید (اگر صفحه شما دارای فایل jQuery می باشد خط اول را حذف کنید.):

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script> $(document).ready(function() { function smoisrex(){ $('.moisrexvib').animate({'top':'-50px'},1000); $('.moisrexvib').animate({'top':'0'},200); } setInterval(function(){smoisrex()},0) }); </script> <style> .moisrexvib{ position:relative; width:200px; height:50px; color:#fff; text-align:center; direction:rtl; padding:5px; font:12px tahoma; border:2px #000 solid; border-radius:10px; -moz-border-radius:10px; -ms-border-radius:10px; -webkit-border-radius:10px; -o-border-radius:10px; -khtml-border-radius:10px; text-shadow:0px 0px 5px; -moz-text-shadow:0px 0px 5px; -o-text-shadow:0px 0px 5px; -ms-text-shadow:0px 0px 5px; -khtml-text-shadow:0px 0px 5px; -webkit-text-shadow:0px 0px 5px; background: -moz-linear-gradient( top center, red, #c10000, #ae0000 ); background: -webkit-linear-gradient( top center, red, #c10000, #ae0000 ); background: -o-linear-gradient( top center, red, #c10000, #ae0000 ); background: -khtml-linear-gradient( top center, red, #c10000, #ae0000 ); background: -ms-linear-gradient( top center, red, #c10000, #ae0000 ); background: linear-gradient( top center, red, #c10000, #ae0000 ); } </style>

این کد را درون body در هر جایی که می خواهید باکس نمایش داده شود بگذارید:

<center style="padding-top:50px;"><div style="position:absolute;top:-200%;"><a href="http://moisrex.rozblog.com/" title="کدستان">کد باکس پیام هشدار</a></div><div class="moisrexvib"> اینجا محل متن شماست. </div></center>