استعمل مربع البحث في الاسفل لمزيد من المواضيع
سريع للبحث عن مواضيع في المنتدى
-
11-01-2013, بتوقيت غرينيتش 04:35 PM
#1
تأثير الصعود لأعلى Scroll to Top
طھط£ط«ظٹط± ط§ظ„طµط¹ظˆط¯ ظ„ط£ط¹ظ„ظ‰ Scroll to Top
زر الانتقال الى الأعلى من الازرار الجميلة التي نراها في الكثير من المواقع وتعتبر جيدة للصفحات التي تحتوي على محتوى كبير فهي توفر حلاً مناسبا للوصول الى اعلى الصفحة بعد الانتهاء من قراءة المشاركات الطويلة، مما يجعل موقعك أكثر سهولة
في هذا الدرس مفصل سوف نتعلم طريقة عمل هذا الزر بواسطة Jquery,css
تجربة
في البداية قم بتصمم السهم الذي تريده او قم بالبحث عن سهم من خلال موقع
iconfinder
محتوى HTML
رمز Code:
<div id="back-top"> <a href="#top"><span></span>للأعلى</a> </div>
تنسيق CSS
رمز Code:
#back-top { bottom: 20px; position: fixed; right: 100px; } #back-top a { width: 65px; display: block; text-align: center; text-decoration: none; color: #333; font: 12px/100% Tahoma, Geneva, sans-serif; /* background color transition */ -webkit-transition: 1s; -moz-transition: 1s; transition: 1s; } #back-top a:hover { color: #000; } /* arrow icon (span tag) */ #back-top span { width: 65px; height: 65px; display: block; margin-bottom: 7px; /* rounded corners */ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; /* background color transition */ -webkit-transition: 1s; -moz-transition: 1s; transition: 1s; background: #D1D1D1 url(up-arrow.png) no-repeat center center; } #back-top a:hover span { background-color: #777; }
تأثير Jquery
المواضيع المتشابهه
-
بواسطة salima في المنتدى لغات البرمجه للويب
مشاركات: 0
آخر مشاركة: 11-01-2013, بتوقيت غرينيتش 04:28 PM
-
بواسطة romaissa في المنتدى تطوير منتديات vb3.8.0
مشاركات: 0
آخر مشاركة: 10-31-2013, بتوقيت غرينيتش 02:45 AM
-
بواسطة linnou في المنتدى دورات تدريبية و شروحات لتصميم المواقع
مشاركات: 0
آخر مشاركة: 10-30-2013, بتوقيت غرينيتش 09:12 PM
-
بواسطة loulou ange في المنتدى دروس و تقنيات عالم التصميم
مشاركات: 0
آخر مشاركة: 10-30-2013, بتوقيت غرينيتش 04:14 PM
-
بواسطة ام بهاء في المنتدى الاعشاب و الطب البديل
مشاركات: 0
آخر مشاركة: 09-30-2013, بتوقيت غرينيتش 10:46 PM
ضوابط المشاركة
- لا تستطيع إضافة مواضيع جديدة
- لا تستطيع الرد على المواضيع
- لا تستطيع إرفاق ملفات
- لا تستطيع تعديل مشاركاتك
-
قوانين المنتدى