الرئيسية
*
  • الرئيسية
  • عن صدام حسين
  • قسم أعمال الموقع
  • قسم منتديات C#.Net
  • قسم منتديات VB.Net
  • قسم منتديات Asp.net
  • قسم منتديات SqlServer
  • مشاركات الأعضاء
  • إتصل بنا

بحــث في الموقع

قسم منتديات Asp.net >> أمثلة وتحسينات ...

طريقة تحسين عرض الصور في لغة Asp.Net

بسم الله الرحمن الرحيم

 

لتحميل المثال

إنقر هنا

 

طريقة تحسين عرض الصور في لغة Asp.Net 

سنقوم بعرض مجموعة من أجمل الطرق المستخدمة نتابع 

الطريقة الاولى :

ظهور الصور بشكل البوم صور وهي طريقة جميله جدا 

قمنا بإضافة الملفات كما بالصورة التاليه 

 

بعد ذلك أضف أوسة في جسم الصفحة Body كما بالصورة التالية

وكرر العملية على عدد الصور المراد عرضها اذا كانت العلية Static واذا كانت Dynamic نفذ مره واحدة وقم بتكرارها بواسطة الكود

 

الان نقوم بالتنفيذ

 هذه الصور المراد عرضها قمنا بإضافة 5 صور

 

عند النقر على الصورة المراد عرضها سنلاحظ ظهور الصور على شكل البوم صور جميل جداً

 

الطريقة الثانية :

ظهور عدسة تقريب جزء من الصورة بشكل رائع 

فمنا بإضافة الملفات والاوسمة كما بالصورة التالية 

 

الان نقوم بالتنفيذ وملاحظة العدسة التقريبية التي تظهر عند تحريك الماوس على الصورة نتابع

الطريقة الثالثة :

إتبثاق الصورة التي تم النقر عليها بطريقة جميله

قمنا بإضافة الملفات والاوسمة التي بالصورة التالية

 

قم الان بالتنفيذ ولاحظ الظهور

 

 

الطريقة الرابعة :

ظهور تكبير وتصغير الصورة عند Hover تحريك الماوس على الصورة

بشرط حدد

قمنا بإضافة التنسيقات التالية

 

عند head

<style type="text/css">
        
        <%--image1--%>
        .frame
        {
            height: 200px;
            width: 200px;
            overflow: hidden;
        }
        .zoom1in img
        {
            height: 200px;
            width: 200px;
            -webkit-transition: all 2s ease;
            -moz-transition: all 2s ease;
            -ms-transition: all 2s ease;
            transition: all 2s ease;
        }
        .zoom1in img:hover
        {
            width: 290px;
            height: 290px;
        }
        
        
        <%--image2--%>
        .zoom2in img
        {
            height: 200px;
            width: 200px;
            -webkit-transition: all 2s ease;
            -moz-transition: all 2s ease;
            -ms-transition: all 2s ease;
            transition: all 2s ease;
        }
        .zoom2in img:hover
        {
            width: 290px;
            height: 290px;
        }
        
        
        <%--image3--%>
        .frame
        {
            height: 200px;
            width: 200px;
            overflow: hidden;
        }
        .zoom3out img
        {
            height: 290px;
            width: 290px;
            -webkit-transition: all 2s ease;
            -moz-transition: all 2s ease;
            -ms-transition: all 2s ease;
            transition: all 2s ease;
        }
        .zoom3out img:hover
        {
            width: 200px;
            height: 200px;
        }
        
        
        <%--image4--%>
        .zoom4out img
        {
            height: 290px;
            width: 290px;
            -webkit-transition: all 2s ease;
            -moz-transition: all 2s ease;
            -ms-transition: all 2s ease;
            transition: all 2s ease;
        }
        .zoom4out img:hover
        {
            width: 200px;
            height: 200px;
        }
    </style>

 

يعد ذلك قم بإضافة الاوسمة التالية

\

 

 

الان نقوم بالتنفيذ ونلاحظ

 

 

لمشاهدة الشرح فيديو

 

 

 

لتحميل الثال

إنقر هنا

 

شكراً لزيارتكم موقعنا

www.ITFY-Edu.com

 

 

-: إخترنا لك

..... طريقة إضافة محرر نصوص لموقعك

..... طريقة إضافة رمز التحقق الى صفح

..... طريقة تحسين عرض الصور في لغة A

..... طريقة تشفير connection Strings

حديث الموقع || الاكثر مشاهدة

... قوانين مورفى للتجارة
... موقع الشيخ عبدالله ع
... موقع وتطبيق مؤسسة ال
... طريقة عرض البيانات ف
... طريقة عرض البيانات ف

آخر أعمالنا

موقع الشيخ / عبدالله علي جيله
مؤسسة البركة التنموية الخيرية
نظام ويب مدرسة الامة
نظام ويب شركة Health Land
نظام ويب مسجد جابر - هرجيسا
نظام ويب شركة إشراقة الأمل
موقع د / زيد قاسم غزاوي
نظام ويب إدارة أقساط العمالة

صفحة الفيسبوك

| الرئيسية
| عن صدام حسين
| قسم أعمال الموقع
| قسم منتديات C#.Net
| قسم منتديات VB.Net
| قسم منتديات Asp.net
| قسم منتديات SqlServer
| مشاركات الأعضاء
إتصل بنا
Designer : تقنية المعلومات لاجلك