ساهم في دعم PBBoard
إذا وجدت أن PBBoard مفيد وتحب أن يستمر في العطاء فيمكنك المساهمة في ذلك. شكراً لك
إستخدم رابط الباي بال في الأسفل
<div class="content"> <div id="ca_banner2" class="ca_banner ca_banner2"> <div class="ca_slide ca_bg2"> <div class="ca_zone ca_zone1"><!--الصورة العليا--> <div class="ca_wrap ca_wrap1"> <img src="images/gs1.png" class="ca_shown" alt=""/> <img src="images/gs2.png" alt="" style="display:none;"/></a> </div> </div> <div class="ca_zone ca_zone2"><!--صورة الوسط--> <div class="ca_wrap ca_wrap2"> <img src="images/gs3.png" class="ca_shown" alt=""/></a> <img src="images/gs4.png" alt="" style="display:none;"/></a> </div> </div> </div> </div> <div style="clear:both;"></div> <div>
/*نمط الشعار*/ .ca_banner{ position:relative; overflow:hidden; background:#f0f0f0; padding:10px; border:1px solid #fff; -moz-box-shadow:0px 0px 2px #aaa inset; } .ca_slide{ width:100%; height:100%; position:relative; overflow:hidden; } .ca_zone{ position:absolute; width:100%; } .ca_wrap{ position:relative; display:table-cell; vertical-align:middle; text-align:center; } .ca_wrap img.ca_shown{ display:inline !important; } /*حجم البنر*/ .ca_banner2{ width:120px; height:600px; } /*الخلفية*/ .ca_bg2{ background:#fff url(images/bgSmall.jpg) no-repeat top left; } .ca_banner2 .ca_zone1{ top:10px; left:0px; } .ca_banner2 .ca_wrap1, /*نفس الحجم*/ .ca_banner2 .ca_wrap2{ width:120px; height:220px; } .ca_banner2 .ca_zone2{ top:250px; left:0px; }
[{"to" : "2"}, {"effect": "zoomOutRotated-zoomInRotated"}], [{"to" : "1"}, {}], [{"to" : "2"}, {"effect": "slideOutRight-slideInRight"}]
<!-- كود الجافا سكريبت --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> <script type="text/javascript" src="jquery.easing.1.3.js"></script> <script src="jquery.transform-0.8.0.min.js"></script> <script src="jquery.banner.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { //4 حركات للبنر $('#ca_banner2').banner({ steps : [ [ //1 حركة : [{"to" : "2"}, {"effect": "slideOutTop-slideInTop"}], [{"to" : "2"}, {"effect": "slideOutTop-slideInTop"}] ], [ //2 حركة: [{"to" : "1"}, {"effect": "slideOutRight-slideInRight"}], [{"to" : "1"}, {"effect": "slideOutLeft-slideInLeft"}], ], [ //3 حركة: [{"to" : "2"}, {"effect": "slideOutLeft-slideInLeft"}], [{"to" : "2"}, {"effect": "slideOutRight-slideInRight"}] ], [ //4 حركة: [{"to" : "1"}, {"effect":"zoomOutRotated-zoomInRotated"}], [{"to" : "1"}, {"effect": "zoomOutRotated-zoomInRotated"}], ] ], total_steps : 4, speed : 2000 }); }); </script>