در برخی سایت ها دیده اید که تبلیغی در سمت راست یا چپ (بالای سایت) به صورت Flash قرار داده شده است و به محض نگه داشتن موس بر روی تبلیغ, به صورت برگه ای کنار زده می شود و تبلیغ به صورت کامل دیده می شود. در این مطلب قصد داریم نحوه ساخت چنین سیستمی با استفاده از jQuery و CSS را به شما آموزش دهیم. در مرحله اول در قسمتی که قرار است تبلیغ نمایش داده شود کد div مورد نظر را قرار می دهیم pageflip قالب کلی تبلیغ و msg_block برای نمایش تبلیغ هنگامی که موس بر روی تبلیغ قرار میگیرد می باشد مرحله اول: کد نمایش تبلیغ فایل subscribe.png تصویر تبلیغ شما می باشد که شما میتوانید تصویر دلخواه خود را قرار دهید. 1<div id="pageflip"> 2 <a href="#"> 3 <img src="page_flip.png" alt="" /> 4 <span class="msg_block">Subscribe via RSS</span> 5 </a> 6</div> مرحله دوم: ایجاد CSS 01#pageflip { 02 position: relative; 03} 04#pageflip img { 05 width: 50px; height: 52px; 06 z-index: 99; 07 position: absolute; 08 right: 0; top: 0; 09 -ms-interpolation-mode: bicubic; 10} 11#pageflip .msg_block { 12 width: 50px; height: 50px; 13 position: absolute; 14 z-index: 50; 15 right: 0; top: 0; 16 background: url(subscribe.png) no-repeat right top; 17 text-indent: -9999px; 18} مرحله سوم: جی کوئری در ابتدا آخرین نسخه جی کوئری را در قالب خود قرار می دهیم. سپس با استفاده از شناسه class مشخص میکنیم که اندازه تصویر برای نمایش چند پیکسل باشد 01<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 02<script type="text/javascript"> 03$(document).ready(function(){ 04 05//Page Flip on hover 06 07 $("#pageflip").hover(function() { 08 $("#pageflip img , .msg_block").stop() 09 .animate({ 10 width: '307px', 11 height: '319px' 12 }, 500); 13 } , function() { 14 $("#pageflip img").stop() 15 .animate({ 16 width: '50px', 17 height: '52px' 18 }, 220); 19 $(".msg_block").stop() 20 .animate({ 21 width: '50px', 22 height: '50px' 23 }, 200); 24 }); 25 26}); 27</script> شما میتوانید اسکریپت را به صورت آماده دریافت نمایید دریافت اسکریپت (لینک مستقیم)
