العودة   منتديات تصميم > ركن برمجيات المواقع ولغات البرمجه > قسم لغات البرمجه

إضافة رد
 
LinkBack أدوات الموضوع انواع عرض الموضوع
  #1  
قديم 05-06-2010, 10:20 PM
عضو مميز
 
تاريخ التسجيل: May 2010
المشاركات: 405
افتراضي أروع قائمة متحركة بالصور تعمل بمكتبةmootools




مع هذه التحفة البرمجية الرائعة , تستطيع ان تضع قائمة متحركة بالصور وعرضها بطريقة منسدلة من اليمين لليسار او العكس بصورة روعة
سوف تعجب بهذه القائمة وتتمنى منها المزيد




شاهد مثال عملى للقائمة من هـــــــــــــــنا


حمل الملفات كاملة من هـــــــــــــــــنا

http://advphp.com/tuts/tabs/image.zip


طريقة الاستخدام:
1- قم بعمل صورة بمقاس 320x200 او كما يحلو لك اذا احببت ان تبٌقى على نفس المقاسات
2- اضف روابط الملفات فى كود الصفحة

view source
print?

1.<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.JavaScript"></script>
2.<script type="text/javascript" src="/JavaScript/fx.elements.JavaScript"></script>
3.<script type="text/javascript" src="/JavaScript/imageMenu.JavaScript"></script>









3- قم بعمل لست للقائمة التى تريد عملها:


view source
print?

01.<div id="imageMenuBasic">
02.<ul>
03.<li><a href="#">Landscapes</a></li>
04.<li><a href="/h#">People</a></li>
05.<li><a href="#">Nature</a></li>
06.<li><a href="#">Urban</a></li>
07.<li><a href="#">Abstract</a></li>
08.</ul>
09.</div>






4- قم بتجميل القائمة فى ملف css او فى نفس الصفحة بين وسم style


view source
print?

1..imageMenu { position: relative; width: 500px; height: 200px; overflow: hidden; }
2..imageMenu ul { list-style: none; margin: 0px; display: block; height: 200px; width: 1000px; }
3..imageMenu ul li { float: left; }
4..imageMenu ul li a { text-indent: -1000px; background:#FFFFFF none repeat scroll 0%; border-right: 2px solid #fff; cursorointer; display:block; overflow:hidden; width:98px; height: 200px; }
5..imageMenu ul li.landscapes a { background: url(/images/imageMenu/landscapes.jpg) repeat scroll 0%; }








5- اضف امر تشغيل اوامر المكتبة فى اول الصفحة



view source
print?

1.<script type="text/javascript">
2.window.addEvent('domready', function(){
3.new ImageMenu($$('#imageMenu a'), {
4.openWidth:310,
5.border:2
6.});
7.});
8.</script>















ملاحظه: راجع كود الصفحة الخاصة بالمثال لتفهم طريقة العمل كاملة







ساهم معنا فى تحسين المنتدى بالضغط هنا ومشاركة الموضوع على الفيس بوك

رد مع اقتباس
إضافة رد

مواقع النشر (المفضلة)

الكلمات الدلالية (Tags)
أروع قائمة متحركة بالصور, تعمل بمكتبةmootools

أدوات الموضوع
انواع عرض الموضوع

تعليمات المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة
Trackbacks are معطلة
Pingbacks are معطلة
Refbacks are متاحة



الساعة الآن 11:51 AM بتوقيت مسقط


Powered by vBulletin® Copyright ©2000 - 2012, Jelsoft Enterprises Ltd.
دعم - لينكات : Search Engine Optimization by vBSEO 3.3.0 Designed & TranZ By Almuhajir

اضغط هنا وادخل ايميلك حتى يصلك جديدنا

القسم العام - اخبار التقنيه - العاب كمبيوتر - برامج - دروس التصميم - مسجات - برامج و العاب  جوال - لغات برمجه - تطوير منتديات - جوجل google - قوالب واستايلات - SEO و XML و RSS - هاكات - تطوير مواقع - نطاقات - استضافه - تبادل اعلانى - دروس فوتوشوب -  - ملحقات فوتوشوب - فلاش - سويش ماكس - تصميم استايلات - العاب  - مواقع عالميه  - دروس فرونت بيج - دريم ويفر

 

منتدى بناتى شرح تكوين روابط الباك لينك فى الفرونت بيج بالصور - privacy-policy- Le monde de la médecine - pes 2012 - مجلة فتافيت عدد رمضان 2011 كاملة مصوره