کد رفت و برگشت نوار های رنگی در بالا و پایین صفحه

این نوار های رنگی در بالا ترین نقطه ها و پایین ترین نقطه های وب دو نوار قرمز و سبز را به هر دو طرف صفحه در حال حرکت و فضولی هستند.

این کد با جی کوئری حرکت می کند ، با سی اس اس زیبا شده و با اچ تی ام ال نمایش داده می شود.

برای دیدن دمو اینجا کلیک کنید.

این کد را در قسمت head صفحه خود قرار دهید (اگر در صفحه خود فایل jquery دارید خط اول را حذف کنید.):

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script> $(document).ready(function() { function moisrexanimate(){ $('.green').animate({'left':'100%'},2000); $('.green').animate({'left':'0'},2000); $('.red').animate({'right':'100%'},2000); $('.red').animate({'right':'0'},2000); }; setInterval(function(){moisrexanimate();},0); }); </script> <style> body{ overflow-x:hidden; padding:10px 0 0 10px; } .topline{ position:absolute; top:0; height:10px; width:99%; } .bottomline{ position:absolute; bottom:0; height:10px; width:99%; } .red{ background:red; height:5px; width:200px; position:absolute; right:0; } .green{ background:green; height:5px; width:200px; position:absolute; left:0; margin:5px 0 5px 0; } .topline .red, .topline .green{ top:0; } .bottomline .red, .bottomline .green{ bottom:0; } </style>

این کد را درون body صفحه خود قرار دهید:

<div style="position:absolute;top:-200%;"><a href="http://moisrex.rozblog.com/" title="کدستان">کد رفت و برگشت نوار های رنگی در بالا و پایین صفحه</a></div><div class="topline"> <div class="green"></div> <div class="red"></div> </div> <div class="bottomline"> <div class="red"></div> <div class="green"></div> </div>