أهلا وسهلا بك زائرنا الكريم في منتدى دعم PBBoard الرسمي، لكي تتمكن من المشاركة ومشاهدة جميع أقسام المنتدى وكافة الميزات ، يجب عليك إنشاء حساب جديد بالتسجيل بالضغط هنا أو تسجيل الدخول اضغط هنا إذا كنت عضواً .

تطوير المواقع web development

وداعا للفلاش...شرح تصميم بنر بواسطة جيكوري

: وداعا للفلاش...شرح تصميم بنر بواسطة جيكوري

14-02-2011 07:40 مساءً

cherire

بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته،،

في درس اليوم سنتعلم طريقة تصميم بنر بواسطة JQuery
و نترك الطرق التقليدية باستعمال برامج الفلاش او الفوتوشوب
وداعا للفلاش...شرح تصميم بنر بواسطة جيكوري

وداعا للفلاش...شرح تصميم بنر بواسطة جيكوري

اولا مثال بسيط (يمكنكم تحميله من المرفق مع جميع ملفات الدرس)

هنا

تحميل المرفق : (jquerybnr.zip)

اذا فل نتبدا مع بعض لندخل عالما جديدا من التصميم باستعمال احدث تقنيات الويب

1- صفحة HTML

اولا ننشيء صفحة HTML عادية ثم نضيف الكود التالي
بين وسمي <body>

CODE


	   <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>

لاحظ اننا استخدمنا صورتين في كل عنصر

1- كود CSS

الكود مشروح ...

CODE

/*نمط الشعار*/
.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;
}

1- جافا سكريبت JavaScript

الان سوف نهيكل الخطوات في الخطوة الاحيرة من الدرس
عن طريق الجافا سكريبت الى خطوات
(خطوة1..خطوة2...)
عن طريق الكود

CODE


[{"to" : "2"}, {"effect": "zoomOutRotated-zoomInRotated"}],
[{"to" : "1"}, {}],
[{"to" : "2"}, {"effect": "slideOutRight-slideInRight"}]

في البنر المطروح كمثال
لدينا حركتين في كل عنصر
و 4 حركات كلية في البنر

CODE


	  <!-- كود الجافا سكريبت -->
	   <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 حركات للبنر 
			 $(&#39;#ca_banner2&#39;).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>

و هذه بعض الاوامر الاخرى التي يمكن استعمالها على البنر كحركات

* zoomOut-zoomInRotated
* zoomOutRotated-zoomInRotated
* zoomOut-zoomIn
* slideOutRight-slideInRight
* slideOutLeft-slideInLeft
* slideOutTop-slideInTop
* slideOutBottom-slideInTop
* slideOutTop-slideInBottom
* fadeOut-fadeIn commented
* fadeOut-zoomIn commented
* zoomOut-fadeIn commented

و يمكنك بطبيعة الحال استعمال الصور و اضافاء تاثيرات خاصة على بنرك لاضفاء الجمالية و الخصوصية على تصميمك وداعا للفلاش...شرح تصميم بنر بواسطة جيكوري

الى هنا ينتهي درسنا و امل ان يكون قد اوفى بالمطلوب
ارجو من كل من قرا الدرس ان يبدي رايه في هذه التقنية الجديدة و التي قد تغنينا عن الفلاش وداعا للفلاش...شرح تصميم بنر بواسطة جيكوري

:. الموضوع الاصلى: هنا | المصدر:المنتدى - مجمع السكريبتات | كاتب الموضوع: admin .: