ITFY-Edu
  • *
  • *
  • دخول
  • نسيت كلمة السر؟
  • تسجيل
  • الرئيسية
  • اتصل بنا
  • من نحن
  • طلب مشروع
  • منتجاتنا
  • الموقع الرسمي
  • آخر أعمالنا
  • دخول
تم نشر الموضوع من قبل :-
صدام حسين العواضي
طريقة تحسين عرض الصور في لغة 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

يقترح لك النظام مشاهدة أيضاً
..... طريقة إضافة محرر نصوص لموقعك
..... طريقة إضافة رمز التحقق الى صفح
..... طريقة تحسين عرض الصور في لغة A
..... طريقة تشفير connection Strings
 
تعليقات الاعضاء :-
*
يجب تسجيل الدخول أولاً للتمكن من الرد على الموضوع دخول تسجيل
تغيير الاستايل :-

طريق الاتصال بتقنية المعلومات لاجلك

  • www.ITFY-Edu.com:الويب
  • [email protected]:بريد الكتروني
  • الموقع : اليمن , صنعاء
  • +واتساب : 967771106838
  • إرسل لنا نموذج

منتديات تقنية المعلومات لاجلك

  • قسم أعمال الموقع
  • مشاريع تخرج VB.Net,#C,Asp.Net
  • قسم منتديات VB.Net
  • قسم منتديات C#.Net
  • قسم منتديات Asp.Net
  • قسم منتديات SqlServer

تعرف على تقنية المعلومات لاجلك

  • الصفحة الرئيسية للمنتدي
  • صفحة الموقع الرسمي
  • آخر أعمال الموقع
  • صفحة من نحن
  • خريطة الموقع

© Copyright www.ITFY-Edu.net 2018 All rights reserved