بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته،،
في درس اليوم سنتعلم طريقة تصميم بنر بواسطة JQuery
و نترك الطرق التقليدية باستعمال برامج الفلاش او الفوتوشوب
اولا مثال بسيط (يمكنكم تحميله من المرفق مع جميع ملفات الدرس)
هنا
تحميل المرفق : (jquerybnr.zip)
اذا فل نتبدا مع بعض لندخل عالما جديدا من التصميم باستعمال احدث تقنيات الويب
1- صفحة HTMLالسلام عليكم ورحمة الله وبركاته،،
في درس اليوم سنتعلم طريقة تصميم بنر بواسطة JQuery
و نترك الطرق التقليدية باستعمال برامج الفلاش او الفوتوشوب
اولا مثال بسيط (يمكنكم تحميله من المرفق مع جميع ملفات الدرس)
هنا
تحميل المرفق : (jquerybnr.zip)
اذا فل نتبدا مع بعض لندخل عالما جديدا من التصميم باستعمال احدث تقنيات الويب
اولا ننشيء صفحة 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
1- جافا سكريبت JavaScript
الان سوف نهيكل الخطوات في الخطوة الاحيرة من الدرس
عن طريق الجافا سكريبت الى خطوات
(خطوة1..خطوة2...)
عن طريق الكود
في البنر المطروح كمثال
لدينا حركتين في كل عنصر
و 4 حركات كلية في البنر
الكود مشروح ...
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 حركات للبنر
$('#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>
و هذه بعض الاوامر الاخرى التي يمكن استعمالها على البنر كحركات
* 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
و يمكنك بطبيعة الحال استعمال الصور و اضافاء تاثيرات خاصة على بنرك لاضفاء الجمالية و الخصوصية على تصميمك
* 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
و يمكنك بطبيعة الحال استعمال الصور و اضافاء تاثيرات خاصة على بنرك لاضفاء الجمالية و الخصوصية على تصميمك
الى هنا ينتهي درسنا و امل ان يكون قد اوفى بالمطلوب
ارجو من كل من قرا الدرس ان يبدي رايه في هذه التقنية الجديدة و التي قد تغنينا عن الفلاش
ارجو من كل من قرا الدرس ان يبدي رايه في هذه التقنية الجديدة و التي قد تغنينا عن الفلاش