响应式水平页面滑动

IT技术 javascript jquery html css responsive-design
2021-02-27 01:12:54

我想创建水平响应式页面导航，如下图所示： 水平响应页面导航过渡

这就是我设法做的：DEMO

$(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;
    });
});
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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="wrapper">
    <nav>
        <a href="#page-1" class="scrollitem selected">page 1</a>
         <a href="#page-2" class="scrollitem">page 2</a>
         <a href="#page-3" class="scrollitem">page 3</a>
    </nav>
    <div id="page-1" class="page"> 
         <h3>page 1</h3>
        <div class="simulate">Simulated content heigher than 100%</div>
    </div>
    <div id="page-2" class="page">  
         <h3>page 2</h3>
        <div class="simulate">Simulated content heigher than 100%</div>
    </div>
    <div id="page-3" class="page"> 
        <h3>page 3</h3>
        <div class="simulate">Simulated content heigher than 100%</div>
    </div>
</div>

然而，我碰到了一些砖墙，因为我的在一定程度上是响应性的，就像你缩放它需要坚持页面而不是显示其他页面。

此外，如果页面很长，它会显示一个完美的滚动条，但在最后一张幻灯片上有一个与滚动条一样宽的间隙。

我有以下要求：

  1. 需要响应
  2. 页面需要能够很长（800 像素）并且仍然可以滚动，并且最后一个页面没有间隙。
  3. 需要在最低 ie9 上工作
2个回答

横向页面滑动

带有左边距动画

这个 jQuery 片段：

  1. 计算幻灯片的数量并相应地设置包装器的宽度。
  2. 根据点击哪个链接，left-margin在包装器上进行动画处理，以平滑过渡显示相应的幻灯片
  3. 切换单击链接的类以突出显示活动链接

请注意，此解决方案：

  1. 仅使用一个菜单出现来最小化标记并防止内容重复。
  2. 只需要 jQuery 库
  3. 适用于动态数量的幻灯片

$(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;
  });
});
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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
  <nav>
    <a href="#page-1" class="scrollitem selected">page 1</a>
    <a href="#page-2" class="scrollitem">page 2</a>
    <a href="#page-3" class="scrollitem">page 3</a>
  </nav>
  <div id="page-1" class="page">
    <h3>page 1</h3>
    <div class="simulate">Simulated content heigher than 100%</div>
  </div>
  <div id="page-2" class="page">
    <h3>page 2</h3>
    <div class="simulate">Simulated content heigher than 100%</div>
  </div>
  <div id="page-3" class="page">
    <h3>page 3</h3>
    <div class="simulate">Simulated content heigher than 100%</div>
  </div>
</div>

这好多了，谢谢！不过，只有最后一个问题，我看到页面宽度和包装器宽度取决于有多少页面，不幸的是，正在加载的内容是完全动态的......有什么推荐的解决方法吗？
2021-04-15 01:12:54
@DawidvanderHoven 顺便说一句，您能更改 HTML 吗？
2021-04-22 01:12:54
@DawidvanderHoven 更好，只出现一个菜单：jsfiddle.net/webtiki/wtvaJ/2
2021-04-22 01:12:54
这是一个更好的方法。滚动是hacky
2021-04-25 01:12:54
哇，再次感谢您的帮助，从您那里学到了很多……我会给您 50 分，但显然必须等待 11 个小时
2021-05-01 01:12:54

“当你缩放时，它需要坚持它所在的页面，而不是显示其他页面”

为此，请保留对当前页面元素的引用，然后在调整窗口大小时执行无延迟 scrollTo 此元素：

var currentPage; //here is where we will hold the reference
jQuery('a.scrollitem').click(function () {
    var targetPage = $(jQuery(this).attr('href'));
    jQuery('a.scrollitem').removeClass('selected');
    jQuery(this).addClass('selected');
    jQuery('.toggle').css({'display':'none'});
    jQuery('.wrapper').scrollTo(targetPage, 1200, function(){
        jQuery('.toggle').css({'display':'block'});
    });
    currentPage = targetPage; //here is where we set the reference
    return false;
});

//and here we do a no-delay scrollTo
$(window).resize(function(){
    if(!!currentPage){
        console.log('window resized.  scrolling to: ', currentPage.attr('id'));
        jQuery('.wrapper').scrollTo(currentPage);
    }
});

在我看来，这使它非常敏感。

页面需要能够很长（800 像素）并且仍然可以滚动，并且最后一个页面没有间隙。

为了消除这个差距，我只是让所有的page时间都比他们需要的时间长一点。滚动不受此影响，因为页面用 左对齐left:0;。我怀疑其他页面有相同的间隙，并且这些页面上的间隙被滚动条覆盖。

.page {
    width: 110%;
}

需要在最低 ie9 上工作

恐怕这方面我无能为力；我只安装了IE11。但是，嘿，它在 IE11 中运行良好。

工作小提琴

至于生涩……那是因为它一直在滚动！你可以添加一个延迟，这样它就不会那么频繁地更新，但你会看到差距。
2021-04-18 01:12:54
谢谢你的回答，它有效但是......当你慢慢地缩小窗口时，有没有办法解决这个问题......如果我把它设置为 110% 宽度，它会在屏幕变小时隐藏内容......
2021-05-01 01:12:54
其它你可能感兴趣的问题
上一篇如何查看内置 JavaScript 函数的来源？ 下一篇jQuery Mobile：如何正确提交表单数据