كيفية إنشاء مقارنة الصور المنزلقة باستخدام HTML CSS وجافا سكريبت

ستتعلم اليوم في هذه المدونة كيفية إنشاء شريط مقارنة الصور باستخدام HTML CSS وجافا سكريبت

مرحبًا أيها القراء ، ستتعلم اليوم في هذه المدونة كيفية إنشاء شريط مقارنة الصور باستخدام HTML CSS وجافا سكريبت.

 

شريط تمرير سهل السحب أو شريط تمرير مقارنة الصور لمقارنة صورتين سريعًا ، مدعومًا من CSS3 و JavaScript / jQuery. في هذا البرنامج [Image Comparison Slider] ، توجد صورتان متماثلتان مع مرشحات مختلفة - أبيض وأسود وملون ، وفي البداية ، يتم عرض كلتا الصورتين بنسبة 50٪ من إجمالي عرضهما كما ترى في الصورة. في المنتصف ، يوجد شريط تمرير قابل للسحب لمقارنة صورتين.

 

إذا كنت تشعر بصعوبة في فهم ما أقوله. يمكنك مشاهدة فيديو تعليمي كامل عن هذا البرنامج [Image Comparison Slider].

 

في الفيديو ، شاهدت منزلق مقارنة الصور أو شريط تمرير سهل السحب والذي يستخدم لمقارنة صورتين. هذا البرنامج ممكن فقط مع علامة HTML <input type = ”range”> ومع الإبهام المنزلق لنطاق المساعدة لعلامة النطاق ، أقوم بإنشاء شريط تمرير قابل للسحب. في JavaScript ، كتبت للتو بضعة أسطر من التعليمات البرمجية.

 

إذا كنت مبتدئًا وتعرف HTML و CSS الأساسيين ، فيمكنك أيضًا بسهولة فهم الرموز وراء إنشاء شريط التمرير هذا أو يمكنك أيضًا إنشاء هذا النوع من شريط مقارنة الصور. ربما تكون قد رأيت هذا النوع من شريط التمرير في العديد من مواقع الويب التي تعتمد على المكون الإضافي jQuery ولكنه برنامج JavaScript خالص.

 

رهيبة صورة المنزلق مقارنة

لإنشاء هذا البرنامج (Image Comparison Slider). أولاً ، تحتاج إلى إنشاء ملفين ، أحدهما ملف HTML والآخر هو ملف CSS. بعد إنشاء هذه الملفات ، قم فقط بلصق الأكواد التالية في ملفك.

الملفات

ما هو رد فعلك؟

like

dislike

love

funny

angry

sad

wow