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





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

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



14-02-2011 07:40 مساء
cherire
عضـو نشيط
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 26-10-2010
رقم العضوية : 870
المشاركات : 480
الدولة : الجزائر
الجنس : ذكر
تاريخ الميلاد : 19-1-1995
قوة السمعة : 501
موقعي : زيارة موقعي
PBBoard Version : 3.0.2
 offline 
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته،،

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

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

هنا

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

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

1- صفحة HTML

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




	   <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

[RIGHT]الكود مشروح ...

/*نمط الشعار*/
.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...)
عن طريق الكود


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



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


	  <!-- كود الجافا سكريبت -->
	   <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>
	   



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

* 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

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


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


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

















14-02-2011 09:09 مساء
مشاهدة مشاركة منفردة [1]
ahmed imad
عضـو نشيط
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 26-10-2010
رقم العضوية : 865
المشاركات : 366
الدولة : المغرب
الجنس : ذكر
تاريخ الميلاد : 13-2-1994
قوة السمعة : 1169
موقعي : زيارة موقعي
PBBoard Version : غير محدد
 offline 
look/images/icons/i1.gif وداعا للفلاش...شرح تصميم بنر بواسطة جيكوري
شكراجزيلا على الشرح 704746 أخي الكريم

14-02-2011 10:13 مساء
مشاهدة مشاركة منفردة [2]
نجم الويب
عضو سوبر ستار
rating
العضو غائب بلاكهرباء حتى اشعار آخر ,والمعذرة على الغياب المتكررلأسباب وظروف ولله الحمد , دعواتكم لبلادي وبلاد المسلمين ..
معلومات الكاتب ▼
تاريخ الإنضمام : 23-07-2010
رقم العضوية : 599
المشاركات : 3734
الدولة : أمي اليمن
الجنس : ذكر
تاريخ الميلاد : 4-3-1987
الدعوات : 1
قوة السمعة : 8237
موقعي : زيارة موقعي
PBBoard Version : 3.0.2
 offline 
look/images/icons/i1.gif وداعا للفلاش...شرح تصميم بنر بواسطة جيكوري
704746 704746 704746 704746
جميل هذا الابداع

18-02-2011 05:03 صباحا
مشاهدة مشاركة منفردة [3]
m_rezk2000
عضـو بـارز
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 07-12-2010
رقم العضوية : 1059
المشاركات : 1339
الدولة : أم الدنيا مصر
الجنس : ذكر
تاريخ الميلاد : 23-5-1969
الدعوات : 1
قوة السمعة : 2893
موقعي : زيارة موقعي
PBBoard Version : غير محدد
 offline 
look/images/icons/i1.gif وداعا للفلاش...شرح تصميم بنر بواسطة جيكوري
اشكرك على الشرح
توقيع :m_rezk2000
http://www.arabsupporter.com/

19-02-2011 04:18 صباحا
مشاهدة مشاركة منفردة [4]
حركتات
عضـو مشارك
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 19-12-2010
رقم العضوية : 1094
المشاركات : 13
الجنس : أنثى
قوة السمعة : 0
 offline 
look/images/icons/i1.gif وداعا للفلاش...شرح تصميم بنر بواسطة جيكوري
الموقع يحتاج تسجيل smile

ياريت ترفقلنا البرنامج هنا
وشكرا على البرنامج الحلو wink_3

20-02-2011 10:50 صباحا
مشاهدة مشاركة منفردة [5]
ahmed imad
عضـو نشيط
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 26-10-2010
رقم العضوية : 865
المشاركات : 366
الدولة : المغرب
الجنس : ذكر
تاريخ الميلاد : 13-2-1994
قوة السمعة : 1169
موقعي : زيارة موقعي
PBBoard Version : غير محدد
 offline 
look/images/icons/i1.gif وداعا للفلاش...شرح تصميم بنر بواسطة جيكوري
عدرا أخي لكن موقعك يطلب التسجيل g

21-02-2011 02:39 صباحا
مشاهدة مشاركة منفردة [6]
sayhi
عضو فعال
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 22-08-2010
رقم العضوية : 647
المشاركات : 215
الدولة : الجزائر
الجنس : ذكر
تاريخ الميلاد : 27-7-1968
قوة السمعة : 106
موقعي : زيارة موقعي
PBBoard Version : 2.1.3
 offline 
look/images/icons/i1.gif وداعا للفلاش...شرح تصميم بنر بواسطة جيكوري
مشكور اخي
لكن لو تتكرم وتضع لنا البرنامج في المرفق لي ان الموقع يشترط التسجيل
ومشكور مقدما




الكلمات الدلالية
لا يوجد كلمات دلالية ..


 







الساعة الآن 03:43 مساء