کد 5 باکس پشت سر هم که با بردن ماوس روی آنها باز می شوند

این 5 باکس رنگی توسط jquery ساخته شده ، با css زیبا سازی شده و با html نمایش داده می شود. شما با بردن ماوس روی این باکس ها باعث می شوید که باکس ها از هم جدا شده و نوشته های آنها نمایان شود.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <style> .overflow{ overflow:hidden; width:300px; height:250px; } .box1,.box2,.box3,.box4,.box5{ border:1px #000 solid; border-radius:5px; -moz-border-radius:5px; -ms-border-radius:5px; -webkit-border-radius:5px; -o-border-radius:5px; -khtml-border-radius:5px; direction:rtl; font:11px tahoma; height:150px; width:250px; text-align:justify; padding:5px; position:relative; } .box1{ background:#5f5; } .box2{ top:-150px; background:#f55; } .box3{ top:-300px; background:#0cf; } .box4{ top:-450px; background:#f5f; } .box5{ top:-600px; background:#ff0; } .moisrex{ position:absolute; top:-200%; } </style> <script> $(document).ready(function(){ $('.overflow').hover(function(){ $(this).css({'height':'350px','width':'100%'}); $('.box1').animate({left:'255px'},'slow'); $('.box2').animate({left:'-255px',top:'-162px'},'slow'); $('.box3').animate({top:'-240px'},'slow').css({'z-index':'2'}); $('.box4').animate({left:'255px',top:'-300px'},'slow'); $('.box5').animate({left:'-255px',top:'-462px'},'slow'); },function(){ $('.box1').animate({left:'0',top:'0'},'slow'); $('.box2').animate({left:'0',top:'-150px'},'slow'); $('.box3').animate({top:'-300px'},'slow').css({'z-index':'inherit'}); $('.box4').animate({left:'0',top:'-450px'},'slow'); $('.box5').animate({left:'0',top:'-600px'},'slow'); $(this).animate({'height':'250px','width':'300px'},'slow'); }); }); </script> <center> <div class="moisrex"><a href="http://moisrex.rozblog.com/" title="کدستان">کد 5 باکس رنگی که با بردن ماوس روی آنها نمایش داده میشود.</a></div><div class="overflow"> <div class="box1"> متن شماره یک </div> <div class="box2"> متن شماره دو </div> <div class="box3"> متن شماره سه </div> <div class="box4"> متن شماره چهار </div> <div class="box5"> متن شماره پنج </div> </div> </center>