linnou
11-01-2013, بتوقيت غرينيتش 04:06 PM
http://www.dzbatna.com/images/icons/iconrote.gif ظˆط¯ط§ط¹ط§ ظ„ظ„ظپظ„ط§ط´...ط´ط±ط* طھطµظ…ظٹظ… ط¨ظ†ط± ط¨ظˆط§ط³ط·ط© ط¬ظٹظƒظˆط±ظٹ (http://www.dzbatna.com/t1792336/)
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته،،
في درس مفصل اليوم سنتعلم طريقة تصميم بنر بواسطة JQuery
و نترك الطرق التقليدية باستعمال برامج الفلاش او الفوتوشوب
http://img808.imageshack.us/img808/9741/sanstitre7b.jpg
اولا مثال بسيط (يمكنكم تحميله من المرفق مع جميع ملفات الدرس مفصل)
هنا (http://g-scripts.com/forum/redirect.php?link=g-scripts.com%2Fdemo%2Fjquerybnr)
تحميل المرفق : (jquerybnr.zip (http://g-scripts.com/forum/index.php?page=download&attach=1&id=41))
اذا فل نتبدا مع بعض لندخل عالما جديدا من التصميم باستعمال احدث تقنيات الويب
- صفحة HTML
اولا ننشيء صفحة HTML عادية ثم نضيف الكود code التالي
بين وسمي <body>
رمز PHP:
<code style="white-space:nowrap"> <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>
</code> </code>
لاحظ اننا استخدمنا صورتين في كل عنصر
- كود code CSS
الكود code مشروح ...
رمز PHP:
<code style="white-space:nowrap"> <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;
}
</code> </code>
- جافا سكريبت script JavaScript
الان سوف نهيكل الخطوات في الخطوة الاحيرة من الدرس مفصل
عن طريق الجافا سكريبت script الى خطوات
(خطوة1..خطوة2...)
عن طريق الكود code
رمز PHP:
<code style="white-space:nowrap"> <code> [{"to" : "2"}, {"effect": "zoomOutRotated-zoomInRotated"}],
[{"to" : "1"}, {}],
[{"to" : "2"},
{"effect": "slideOutRight-slideInRight"}]
</code> </code>
في البنر المطروح كمثال
لدينا حركتين في كل عنصر
و 4 حركات كلية في البنر
رمز PHP:
<code style="white-space:nowrap"> <code> <!-- كود code الجافا سكريبت script -->
<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>
</code> </code>
و هذه بعض الاوامر الاخرى التي يمكن استعمالها على البنر كحركات
* 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
و يمكنك بطبيعة الحال استعمال الصور و اضافاء تاثيرات خاصة على بنرك لاضفاء الجمالية و الخصوصية على تصميمك http://g-scripts.com/forum/look/images/smiles/biggrin2.gif
الى هنا ينتهي درس مفصلنا و امل ان يكون قد اوفى بالمطلوب
ارجو من كل من قرا الدرس مفصل ان يبدي رايه في هذه التقنية الجديدة و التي قد تغنينا عن الفلاش http://g-scripts.com/forum/look/images/smiles/biggrin2.gif
:. الموضوع الاصلى: وداعا للفلاش...شرح طريقة تصميم بنر بواسطة جيكوري (http://g-scripts.com/forum/t316.html) | المصدر: المنتدى forum - مجمع السكريبت scriptات (http://g-scripts.com/forum/) | كاتب الموضوع: admin (http://g-scripts.com/forum/u1.html) .:
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
الملفات المرفقة
http://www.traidnt.net/vb/images/attach/zip.gif jquerybnr.zip (http://www.traidnt.net/vb/attachments/553995d1298142375-jquerybnr.zip) (161.8 كيلوبايت, عدد مرات المشاهدة 544 مرة)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته،،
في درس مفصل اليوم سنتعلم طريقة تصميم بنر بواسطة JQuery
و نترك الطرق التقليدية باستعمال برامج الفلاش او الفوتوشوب
http://img808.imageshack.us/img808/9741/sanstitre7b.jpg
اولا مثال بسيط (يمكنكم تحميله من المرفق مع جميع ملفات الدرس مفصل)
هنا (http://g-scripts.com/forum/redirect.php?link=g-scripts.com%2Fdemo%2Fjquerybnr)
تحميل المرفق : (jquerybnr.zip (http://g-scripts.com/forum/index.php?page=download&attach=1&id=41))
اذا فل نتبدا مع بعض لندخل عالما جديدا من التصميم باستعمال احدث تقنيات الويب
- صفحة HTML
اولا ننشيء صفحة HTML عادية ثم نضيف الكود code التالي
بين وسمي <body>
رمز PHP:
<code style="white-space:nowrap"> <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>
</code> </code>
لاحظ اننا استخدمنا صورتين في كل عنصر
- كود code CSS
الكود code مشروح ...
رمز PHP:
<code style="white-space:nowrap"> <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;
}
</code> </code>
- جافا سكريبت script JavaScript
الان سوف نهيكل الخطوات في الخطوة الاحيرة من الدرس مفصل
عن طريق الجافا سكريبت script الى خطوات
(خطوة1..خطوة2...)
عن طريق الكود code
رمز PHP:
<code style="white-space:nowrap"> <code> [{"to" : "2"}, {"effect": "zoomOutRotated-zoomInRotated"}],
[{"to" : "1"}, {}],
[{"to" : "2"},
{"effect": "slideOutRight-slideInRight"}]
</code> </code>
في البنر المطروح كمثال
لدينا حركتين في كل عنصر
و 4 حركات كلية في البنر
رمز PHP:
<code style="white-space:nowrap"> <code> <!-- كود code الجافا سكريبت script -->
<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>
</code> </code>
و هذه بعض الاوامر الاخرى التي يمكن استعمالها على البنر كحركات
* 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
و يمكنك بطبيعة الحال استعمال الصور و اضافاء تاثيرات خاصة على بنرك لاضفاء الجمالية و الخصوصية على تصميمك http://g-scripts.com/forum/look/images/smiles/biggrin2.gif
الى هنا ينتهي درس مفصلنا و امل ان يكون قد اوفى بالمطلوب
ارجو من كل من قرا الدرس مفصل ان يبدي رايه في هذه التقنية الجديدة و التي قد تغنينا عن الفلاش http://g-scripts.com/forum/look/images/smiles/biggrin2.gif
:. الموضوع الاصلى: وداعا للفلاش...شرح طريقة تصميم بنر بواسطة جيكوري (http://g-scripts.com/forum/t316.html) | المصدر: المنتدى forum - مجمع السكريبت scriptات (http://g-scripts.com/forum/) | كاتب الموضوع: admin (http://g-scripts.com/forum/u1.html) .:
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
الملفات المرفقة
http://www.traidnt.net/vb/images/attach/zip.gif jquerybnr.zip (http://www.traidnt.net/vb/attachments/553995d1298142375-jquerybnr.zip) (161.8 كيلوبايت, عدد مرات المشاهدة 544 مرة)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
