اشهار مواقع,اشهار منتديات,منتديات اشهار المنتيات,تقنيات الاشهار,اشهار مجانى,منتدى الاشهار العربى,منتدى الاشهار المجانى,اشهر موقعك,اشهر منتداك.اشهر مدونتك,اشهر صفحتك,اشهار مواقع,اشهار منتديات,اشهار صفحات,اشهار مدونات,اشهارجروبات,add url,add site,add grou
 
الرئيسيةالرئيسية  البوابةالبوابة  اليوميةاليومية  س .و .جس .و .ج  بحـثبحـث  المجموعاتالمجموعات  التسجيلالتسجيل  دخولدخول  

شاطر | 
 

 تعلم كيفيه عمل الـ slideshow بـ 6 انماط مختلفه#1

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل 
كاتب الموضوعرسالة
AL Master
الــمــديــر الــعــامــ
الــمــديــر الــعــامــ
avatar

المساهمات : 646
تاريخ التسجيل : 10/11/2010

مُساهمةموضوع: تعلم كيفيه عمل الـ slideshow بـ 6 انماط مختلفه#1   الجمعة نوفمبر 12, 2010 1:09 pm

السلام عليكم


تحميل الـ SlideShow

ملاحظه : قمت بطرح الموضوع في مدرسه كليبرز ايضا (الاستاذ يوسف) لكن اسمي هناك مختلف

السلايد شو , الجميع يعرفه , نراه كثيرا , او ربما سمعنا عنه

اصبح جزء وعنصر مهم ويستخدم بكثره في التصاميم العصرية

هناك اشكال وانماط وتأثيرات مختلفه له , اليوم سوف اشرح لكم

طريقه من عشرات الطرق تمكننا من عمل السلايد شو وبانماط مختلفه

في البدايه اود ان اوضح ان الكود من اجتهادي الخاص , واحببت ان اشرحه لكم

لكي اعطيكم الفكره التي من خلالها نستطيع ان نقوم باشياء عده غير السلايد شو

كما ويمكن للبعض استخدام الامثله ان ارادو لا يوجد اي مشكله

سنبدأ باسم الله

النمط الاول - في البدايه اود ان اوضح كيف سنعمل

اولا النمط الاول هو عباره عن سلايد شو يعمل تلقائيا ويعرض فيه نص او اذا احببت صور ونص كما تريد وتستطيع ايقاف العمل التلقائي ويمكنك ايضا اعاده تشغيله

التأثير : اختفاء المحتوى الحالي ومن ثم ظهور تدريجي للمحتوى الجديد

اولا كيف ستكون التركيبه للسلايد شو اي الـ (html)

رمز Code:
<h2></h2><div class="container"><!-- start container --> <div class="con"> <div class="slide"></div> <div class="slide"></div> <div class="slide"></div> <div class="slide"></div> </div> <a class="stop" href="#">stop</a> <a class="start" href="#">start</a></div><!-- end container -->
المحتوى سوف يكون داخل
رمز Code:
<div class="slide"></div>
لنرى صوره توضيحه لما سوف نقوم بعمله


لنبدأ بالـ css

اولا تنسيق الصندوق الخارجي (الذي يحتوي جميع العناصر الداخليه) - container
رمز Code:
.container { width:600px; /* عرض الصندوق الخارجي */ height:290px;/* ارتفاع الصندوق الخارجي */ background:#ddd;/* الخلفية */ margin:40px auto;/* لكي يتم توسيطه وسط الصفحه بالاضافه للبعد من الاسفل والاعلى */ overflow:hidden;/* مهم جدا لكي يخفي كل العناصر الخارجه من الصندوق */ -moz-box-shadow:2px 3px 5px #000; /*ظل للنص يعمل مع الفيرفوكس*/ -webkit-box-shadow:2px 3px 5px #000;/*كروم وسفاري*/ box-shadow:2px 3px 5px #000;/*ظل للنص يعمل مع الاوبرا*/ position:relative;/* مهم لاننا سوف نحتاج لاعطاء عناصر داخليه بوزشن */}
لدينا صندوق خارحي سوف يحتوي صندوق اخر يسمى con هذا الصندوق هو

الذي يحتوي على صناديق المحتويات(slide) وعرضه سوف يكون حسب عدد صناديق المحتويات وبما انن قمنا باعطاء الصندوق الخارجي خاصيه
overflow:hidden;
وكل (slide)سوف تأخذ نفس عرض الـ container بذلك نضمن اننا سوف نرى فقط

(slide)واحده امامنا والاخريات سوف تختفي لانها خارج حدود الـ container

لكن كيف سنرى الاخريات , ببساطه سوف نقوم بتحرك الـ con الذي يحتوي على الـ

slide وسوف نحركه بمقدار عرض الـ slide الواحده وبذلك سنرى واحده تلو الاخرى

دعونا لا نستبق الامور ونركز والان

تنسيق الـ con
رمز Code:
.con { margin:22.5px auto; /* تحديد البعد من الاعلى والاسفل*/ height:240px;/* الارتفاع*/ background:#bbb;/* لون الخلفية */ position:relative;/*مهم جدا لانها ستسمح لنا بتحريك هذا الصندوق*/ border-top:1px solid #fff;/*اطار علوي*/ border-bottom:1px solid #fff;/*اطار سفلي*/ color:#333;/*لون النص*/ text-shadow:0px 1px 0px #ddd;/*ظل للنص - سنعالج الخلل في الاكسبلورر باستخدام اضافه للجيكيوري*/ font-family:"Times New Roman",Georgia,Times, serif;/*نوع الخط*/ font-size:17px;/*حجم الخط*/ left:0; /* مهمه جدا في سفاري والاكسبلورر وكروم لانه القيمه الاصليه فيهم تعطى auto ونحن نريدها صفر وسنستخدم هذه الخاصيه في الانماط التي فيها اسمهم تستخدم في التحريك */ }
لكن ماذا عن عرض الـ con ? سوف نقوم باعطائه عرض من خلال الـ javascript

لكي يكون مرن بحيث العرض يتغير حسب عدد الـ slides

وهذا يعطينا مرونه كبيره

الان سوف نقوم بعمل الـ css للـ slide

رمز Code:
.slide { width:560px;/* غير مهم */ padding:20px; /* 560+40 = 600 (عرض الـ con)*/ height:200px;/* 200+40 = 240* (ارتفاع الـ con)/ float:left;}
لماذا العرض غير مهم ؟ لاننا سوف نقوم باعطائه عرض من خلال الـ jquery

حسب عرض الـ container وبذلك حتى لو قمنا بتوسيع الـ container سوف

توسع هذه تلقائيا او حتى لو قلصناها شيء جميل اليس كذلك

سوف نعود لتنسيق الـ ايقونات البدايه والايقاف فيما بعد

الان لنبدا بالـ jquery

نستدعي ملف المكتبه والملف الذي نريد ان نكتب فيه الاكواد

رمز Code:
<script src="scripts/last.js" type="text/javascript" ></script><script src="scripts/script.js" type="text/javascript" charset="utf-8" ></script>
الان داخل ملفـ script.js

رمز Code:
$(function(){ نكتب هنا الاكواد});
الان كود الـ jquery
شرح كامل في التعليقات
رمز Code:
$(function(){ var realWidth= $('.slide').size(); //ايجاد عدد الـ slide var realslideWidth = $('.slide').outerWidth(); //ايجاد العرض الخارجي للـ slide var realslidewidth2 = $('.slide').width();//ايجاد عرض الـ slide var real_w = realslideWidth - realslidewidth2 ; //لمعرفه الـ padding var containerWidth= $('.container').width(); //عرض الـ container /*الان سنحدد عرض الـ slide ,وسوف يكون العرض هو نفس عرض الـ container لكن ننقص منه الـ padding الخاص بـ slide لكي تكون النتيجه متساويه تماما */ $('.slide').css('width',containerWidth-real_w); //تحديد عرض الـ slide /*الان سوف نحدد عرض ال con وسوف يكون حسب عدد الـ slide */ $('.con').width((containerWidth)*realslideWidth); //تحديد عرض الـ con var i=1; //تعريف متغير var count = 0; //تعريف متغير function animation(){ // الفنكشن الخاص بالحركه if(count != realWidth-1){ /* الشرط يتحقق باننا لسنا في اخر سلايد لانناان كنا في اخر سلايد نريده ان يرجعنا للاولى بعدها اما ان لم نكن فعليه ان يتقدم للسلايد التاليه */ $('.con').fadeOut('slow'); //اختفاء تدريجي للسلايد الحاليه $('.con').animate({'left'Sad-containerWidth)*i},500); /* كيف سنجعله يعرض لنا السيلايد التاليه ؟ نحرك الصندوق الكلي (con) بنفس عرض السلايد الواحده وبذلك تظهر السلايد التاليه وهذا ما فعلناه هنا حركنا الـ con بمقدار عرض الـ slide الى اليسار لكنك لن تشاهد الحركه لان السلايد مختفيه ! المتغير i يبين لنا في اي سلايد نحن الان الاولى الثانيه الثالثه اي واحده ؟ لانه حسب اي واحده سوف نقرر كم مقدار الازاحه لليسار بالنسبة لل con */ $('.con').fadeIn(1500); /* بعد انتهاء الحركه سوف يتم عرض السلايد الجديده وسوف تشاهدها */ i++; /* زياده المتغير بمقدار واحد */ count++; /* زياده المتغير بمقدار واحد */ } else { //في حال كنا في السلايد الاخيره $('.con').fadeOut('slow');//اخفاء السلايد الاخيره $('.con').animate({'left':0},500); /* ارجاع الـ con للبدايه اي انه سيعود للسلايد الاولى */ $('.con').fadeIn(1500);//اظهار السلايد والتي سوف تكون الاولى count=0;//ارجاع القيم الافتراضيه للمتغيرات i=1;//ارجاع القيم الافتراضيه للمتغيرات } } /* تشغيل الفنكشن animation مره كل 7 ثواني */ var e = setInterval(animation,7000); });
الان سوف نعود لـ ايقونتا الايقاف والتشغيل

اولا الـ css

رمز Code:
.stop { position:absolute; /*مهم*/ left:35px;/*البعد من يسار الـ container*/ bottom:1px;/*البعد من اسفل الـ container*/ width:24px;/*العرض*/ height:24px;/*الارتفاع*/ text-indent:-999999px;/*لاخفاء النص*/ background:url('../images/stop.png');/*مسار الخلفيه*/}.start { position:absolute; /*مهم*/ left:85px;/*البعد من يسار الـ container*/ bottom:1px;/*البعد من اسفل الـ container*/ background:url('../images/start-clicked.png');/*مسار الخلفيه*/ width:24px;/*العرض*/ height:24px;/*الارتفاع*/ text-indent:-999999px;/*لاخفاء النص*/}
عند وضع الماوس علي الايقونات والضغط

رمز Code:
.start:hover {background:url('../images/start-hover.png');}.stop:hover {background:url('../images/stop-hover.png');}.stop:active {background:url('../images/stop.png');}.start:active('../images/start.png');}
الان سوف نرى اكواد الـ jquery

رمز Code:
$('.stop').click(function(){ //عند الضغط على الايقاف $(this).css({'background':'url("images/stop-clicked.png")'}); //تغيير الخلفيه للايقاف $(this).next().css({'background':'url("images/start.png")'}); // تغيير الخلفيه للـ تشغيل clearInterval(e); // ايقاف الـ slideshow return false; //تعطيل التصرف الافتراضي للرابط }); $('.start').click(function(){//عند الضغط على التشغيل $(this).css({'background':'url("images/start-clicked.png")'}); // تغيير الخلفيه للـ تشغيل $(this).prev().css({'background':'url("images/stop.png")'}); //تغيير الخلفيه للايقاف e = setInterval(animation,7000); //بدء الـ slideshow return false;//تعطيل التصرف الافتراضي للرابط });
الان انتهينا من النمط الاول وسننتقل للنمط الثاني

النمط الثاني هو عباره عن سلايد شو يعمل تلقائيا ويعرض فيه نص او اذا احببت صور ونص كما تريد وتستطيع ايقاف العمل التلقائي ويمكنك ايضا اعاده تشغيله

التأثير : تحريك المحتوى امامك بدون اخفاء وظهور

النمط الثاني مطابق للاول في كل شيء الا في شي بسيط سوف اوضحه

ونفس الشيء في الـ html

لكن نغير الكلاسات - فضلت وضع كلاسات وليسid
مع العلم ان كل نمط كلاسات مختلفه لكي لا يحدث اخلاط في الـ jquery
والكلاسات افضل لانه ممكن اكرر نفس لسلايد ولكن انت تستطيع اختيار ما تشاء
حسب استخدامك للسلايد
رمز Code:
<h2>slideshow(auto scroll)</h2><div class="container-scroll"> <div class="con-scroll"> <div class="slide-scroll"></div> <div class="slide-scroll"></div> <div class="slide-scroll"></div> <div class="slide-scroll"></div> </div> <a class="stop-scroll" href="#">stop</a> <a class="start-scroll" href="#">start</a></div>
لذلك في الـ css سوف نقوم باضافه الكلاسات الجيده فقط للتنسيق السابق

مثل هذا
رمز Code:
.container, .container-scroll {}
ونفس الشيء للباقين
اما الاختلاف فهو في الـjquery
وبالتحديد في الدالهـ المسؤوله عن التأثير

لنرى الاختلاف
رمز Code:
function animationscrolling(){ if(countscroll != realWidth_scroll-1){ $('.con-scroll').animate({'left'Sad-containerWidth_scroll)*iscroll},500); iscroll++; countscroll++; } else { $('.con-scroll').animate({'left':0},500); countscroll=0; iscroll=1; } }
طبعا قمنا بتغيرر اسماء المتغير مع العلم من الممكن ابقائها نفس الشيء لانها

داخل فنكشن لكن افضل تغييرها

وقمنا بوضع اسماء الكلاسات الجديده

والاختلاف اننا حذفنا الـ fadeOut & fadeIn

---------------------------------------------------------------------------------

اسف لعدم عنايتي بتصميم الصور الموجوده في الموضوع بسبب ضيق الوقت

انا تعبت بصراحه يا جماعه في المره القادمه سوف اشرح اما النمطين 3 و 4

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


|اشهار مواقع|اشهار منتديات|اشهار صفحات|اشهار مدونات|اشهارجروبات|اضف موقع|اضف منتدى|اضف صفحة|اضف مدونة|اضف|add url|add site|add group|add forum|add blog|add page|add dir|add news|add link|add

Web Master
Forum EGY
2012@2013
الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://esh7ar.own0.com
 
تعلم كيفيه عمل الـ slideshow بـ 6 انماط مختلفه#1
استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
اشهار المنتديات :: منتديات دعم المواقع وتطويرها :: منتدى لغات البرمجه php و asp و Ajax و Java-
انتقل الى: