如何使用 jQuery 和 CSS 创建响应式水平页面滑动系统？-css教程-PHP中文网

如何使用 jQuery 和 CSS 创建响应式水平页面滑动系统？

Patricia Arquette

发布： 2024-10-30 16:19:26

原创

407 人浏览过

How to Create a Responsive Horizontal Page Sliding System with jQuery and CSS?

响应式水平页面滑动

问题

设计响应式水平导航系统面临几个挑战：

维护页面视口内的可见性
防止页面之间出现间隙或重叠
允许页面超出 100% 高度，并具有滚动条可见性
确保与 Internet Explorer 9 或更高版本的兼容性

解决方案

此解决方案采用 jQuery 并包含以下主要功能：

响应式大小调整： 脚本计算总宽度基于页数的包装器，确保响应式缩放。
平滑过渡：单击导航链接可以平滑地为包装器的左边距设置动画，在页面之间过渡而不会突然跳转。
动态高度处理：页面可以延伸超过 100% 高度，必要时会出现滚动条，消除不需要的间隙。
活动链接指示：所选导航链接突出显示以指示当前页面位置。
IE 兼容性：代码与 Internet Explorer 9 及更高版本兼容。

代码实现

<code class="javascript">$(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;
  });
});</code>

登录后复制

CSS

<code class="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;
}</code>

登录后复制