انزلاق الصفحة الأفقي سريع الاستجابة

المشكلة

يمثل تصميم نظام تنقل أفقي سريع الاستجابة العديد من التحديات:

• الحفاظ على الصفحة الرؤية داخل إطار العرض
• منع الفجوات أو التداخل بين الصفحات
• السماح للصفحات التي يتجاوز ارتفاعها 100%، مع إمكانية رؤية شريط التمرير
• ضمان التوافق مع Internet Explorer 9 أو أعلى

الحل

يستخدم هذا الحل jQuery ويتضمن ما يلي الميزات الرئيسية:

1. الحجم المستجيب: يحسب البرنامج النصي العرض الإجمالي للغلاف بناءً على عدد الصفحات، مما يضمن التحجيم سريع الاستجابة.
2. الانتقال السلس: يؤدي النقر على روابط التنقل إلى تنشيط الهامش الأيسر للمجمّع بسلاسة، والانتقال بين الصفحات دون قفزات مفاجئة.
3. التعامل مع الارتفاع الديناميكي: يمكن أن تمتد الصفحات إلى ما يتجاوز ارتفاع 100%، ويظهر شريط التمرير عند الضرورة، مما يزيل غير المرغوب فيه الفجوات.
4. مؤشر الارتباط النشط: يتم تمييز رابط التنقل المحدد للإشارة إلى موضع الصفحة الحالية.
5. توافق IE: الكود متوافق باستخدام Internet Explorer 9 والإصدارات الأحدث.

تنفيذ التعليمات البرمجية

$(document).ready(function() {
  var slideNum = $('.page').length,
    wrapperWidth = 100 * slideNum,
    slideWidth = 100 / slideNum;
  $('.wrapper').width(wrapperWidth   '%');
  $('.page').width(slideWidth   '%');

  $('a.scrollitem').click(function() {
    $('a.scrollitem').removeClass('selected');
    $(this).addClass('selected');

    var slideNumber = $($(this).attr('href')).index('.page'),
      margin = slideNumber * -100   '%';

    $('.wrapper').animate({
      marginLeft: margin
    }, 1000);
    return false;
  });
});

CSS

html,
body {
  height: 100%;
  margin: 0;
  overflow-x: hidden;
  position: relative;
}

nav {
  position: absolute;
  top: 0;
  left: 0;
  height: 30px;
}

.wrapper {
  height: 100%;
  background: #263729;
}

.page {
  float: left;
  background: #992213;
  min-height: 100%;
  padding-top: 30px;
}

#page-1 {
  background: #0C717A;
}

#page-2 {
  background: #009900;
}

#page-3 {
  background: #0000FF;
}

a {
  color: #FFF;
}

a.selected {
  color: red;
}

.simulate {
  height: 2000px;
}

الاستنتاج

يوفر مقتطف الشفرة هذا حلاً شاملاً للتنقل الأفقي سريع الاستجابة في الصفحة، ومعالجة المتطلبات المذكورة بكفاءة. تسمح مرونته بقوائم التنقل الديناميكية واستيعاب الصفحات الطويلة باستخدام أشرطة التمرير. علاوة على ذلك، فإن توافقه مع Internet Explorer 9 يضمن التوافق مع مجموعة واسعة من المتصفحات.