首页
前端开发
响应式水平页面滑动

响应式水平页面滑动 [英] Responsive horizontal page sliding

查看：21 发布时间：2022/1/4 17:58:50 javascript jquery html css responsive-design

本文介绍了响应式水平页面滑动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想创建水平响应页面导航，如下图所示:

这是我设法做的:DEMO

$(document).ready(function () {var slideNum = $('.page').length,包装宽度 = 100 * 幻灯片编号，幻灯片宽度 = 100/幻灯片数量；$('.wrapper').width(wrapperWidth + '%');$('.page').width(slideWidth + '%');$('a.scrollitem').click(function(){$('a.scrollitem').removeClass('selected');$(this).addClass('selected');var slideNumber = $($(this).attr('href')).index('.page'),边距 = 幻灯片编号 * -100 + '%';$('.wrapper').animate({marginLeft: margin},1000);返回假；});});

html, body {高度:100%；边距:0；溢出-x:隐藏；位置:相对；}导航{位置:绝对；顶部:0；左:0;高度:30px；}.包装{高度:100%；背景:#263729；}.页 {向左飘浮;背景:#992213；最小高度:100%；填充顶部:30px；}#page-1 {背景:#0C717A；}#第2页 {背景:#009900；}#page-3 {背景:#0000FF；}一个 {颜色:#FFF；}a.选择{红色;}.模拟{高度:2000px；}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><div class="wrapper"><导航><a href="#page-1" class="scrollitem selected">第 1 页</a><a href="#page-2" class="scrollitem">第 2 页</a><a href="#page-3" class="scrollitem">第3页</a></nav><div id="page-1" class="page"><h3>第1页</h3><div class="simulate">模拟内容高于100%</div>

<div id="page-2" class="page"><h3>第2页</h3><div class="simulate">模拟内容高于100%</div>

<div id="page-3" class="page"><h3>第3页</h3><div class="simulate">模拟内容高于100%</div>

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

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

我有以下要求:

需要积极响应
页面需要能够很长(800 像素)并且仍然可以滚动，最后一个页面没有间隙.
需要在最低 ie9 上工作

解决方案

水平页面滑动

带有左边距动画

这个 jQuery 片段:

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

注意这个解决方案:

仅使用一个菜单出现以最大限度地减少标记并防止内容重复.
只需要 jQuery 库
适用于动态数量的幻灯片

$(document).ready(function() {var slideNum = $('.page').length,包装宽度 = 100 * 幻灯片编号，幻灯片宽度 = 100/幻灯片编号；$('.wrapper').width(wrapperWidth + '%');$('.page').width(slideWidth + '%');$('a.scrollitem').click(function() {$('a.scrollitem').removeClass('selected');$(this).addClass('selected');var slideNumber = $($(this).attr('href')).index('.page'),边距 = 幻灯片编号 * -100 + '%';$('.wrapper').animate({marginLeft: 保证金}, 1000);返回假；});});

html,身体 {高度:100%；边距:0；溢出-x:隐藏；位置:相对；}导航{位置:绝对；顶部:0；左:0；高度:30px；}.包装{高度:100%；背景:#263729；}.页 {向左飘浮;背景:#992213；最小高度:100%；填充顶部:30px；}#page-1 {背景:#0C717A；}#第2页 {背景:#009900；}#page-3 {背景:#0000FF；}一个 {颜色:#FFF；}a.选择{红色;}.simulate {高度:2000px；}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><div class="wrapper"><导航><a href="#page-1" class="scrollitem selected">第 1 页</a><a href="#page-2" class="scrollitem">第 2 页</a><a href="#page-3" class="scrollitem">第3页</a></nav><div id="page-1" class="page"><h3>第1页</h3><div class="simulate">模拟内容高于100%</div>

<div id="page-2" class="page"><h3>第2页</h3><div class="simulate">模拟内容高于100%</div>

<div id="page-3" class="page"><h3>第3页</h3><div class="simulate">模拟内容高于100%</div>

I want to create horizontal responsive page navigation as illustrated by the below image :

This is what I have managed to do : 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>

I have however hit a few brick walls, as mine is responsive to a certain degree, its just as you scale it needs to stick to the page its on and not reveal the others.

Also if the pages are long it shows a scroll bar which is perfect, but on the last slide there is a gap as wide as the scroll-bar.

I have the following Requirements:

Needs to be Responsive
pages need to be able to be long (800px) and still scrollable, without the gap on the last one.
needs to work on minimum ie9

解决方案

Horizontal page sliding

with left-margin animation

This jQuery snippet :

Calculates the number of slides and set the width of the wrapper accordingly.
According to which link is clicked, left-margin is animated on the wrapper to show the corresponding slide with a smooth transition
Toggles the class of the clicked link for active link highlighting

Note that this solution:

Uses only one menu occurence to minimize markup and prevent content repetition.
Requires only the jQuery library
works for a dynamic number of slides

$(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>

这篇关于响应式水平页面滑动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

登录关闭

扫码关注1秒登录

发送“验证码”获取 | 15天全站免登陆