水平 jQuery 滑动改为向下滑动

Posted 2023-05-09

【中文标题】水平 jQuery 滑动改为向下滑动

【英文标题】：Horizontal jQuery sliding slides down instead

【发布时间】：2014-05-16 08:29:02

【问题描述】：

我想要一个水平滑块在单个视图（在 Wordpress 中）上滑过“页面”。 我的代码几乎可以工作了，但不是水平滑动块，而是将页面向下滑动一点（就像按下键盘上的向下按钮一样）。

这是我的代码：

    <style>
    #main
    
        overflow: hidden;
    

    #primary 
    
        position: relative; 
    

    div.content div 
    
        position: absolute;
        width:100%;
        top:25px;
        left:0px;
    
    #box1  background: yellow; left:0px;
    #box2  background: orange; left:100%; 
    #box3  background: #838EDE; left:200%; 
    #box4  background: #FFFCC; left:300%; 
    #box5  background: red; left:400%; 

    #navlinks li 
    
        float: left;
        display: inline-block;
        background: #F3F3F3;
        border-top: 1px solid #E5E5E4;
        height: 20px;
        width: 15%;
        text-align: center;
        padding: 10px 0px;
        border-bottom: 1px solid #e5e5e4;
        margin: 0px 5px;
    

    #navlinks > li.current, #navlinks > li:hover
    
        background: #cc0000;
        border-color: #A00;
    

    #navlinks > li a 
    
        color: #303030;
        text-decoration: none; 
    

    #navlinks > li.current a, #navlinks > li:hover a 
    
        color: #fff;
    

    #navlinks > li.tab1, #navlinks > li.tab5
    
        margin: 0px;
    

    #navlinks > li:after
    
        width: 0px;
        height: 0px;
        border-style: solid;
        border-width: 50px 0 50px 50px;
        border-color: transparent transparent transparent #f3f3f3;
        line-height: 0px;
    
</style>

<div id="primary" class="site-content">
    <ul id="navlinks">
        <li class="tab tab1 current" data-href="#box1"><a>Link 1</a></li>
        <li class="tab tab2" data-href="#box2"><a>Link 2</a></li>
        <li class="tab tab3" data-href="#box3"><a>Link 3</a></li>
        <li class="tab tab4" data-href="#box4"><a>Link 4</a></li>
        <li class="tab tab5" data-href="#box5"><a>Link 5</a></li>
    </ul>

    <div class="content" role="main">
        <div id="box1">Blok 1</div>
        <div id="box2">Blok 2</div>
        <div id="box3">Blok 3</div>
        <div id="box4">Blok 4</div>
        <div id="box5">Blok 5</div>
    </div><!-- #content -->
</div><!-- #primary -->

<script>
var j = jQuery.noConflict();
j(document).ready(function(j) 
    j(document).on('click', '#navlinks li', function() 
        j('.tab').removeClass('current');
        j(this).addClass('current');

        var panel = j(this).data('href');
        j.scrollTo(panel, 1000);
    );
);
</script>

您可能在<style></style> 标记中看到的任何未知类或ID 都来自页眉或页脚（例如#main）。 scrollTo() 函数来自 plugin。

我尝试创建一个 jsFiddle，但结果更糟：/。 有人在我的代码中看到任何错误吗？提前致谢。

更新： 我用我当前的设置做了一个 jsFiddle： jsfiddle.net/UkP4X

【问题讨论】：

水平表示，每个盒子应该有100％的宽度或在100％的宽度内，所有这些盒子（id）都将有20％;

@KesaVan 所以我应该将所有框的宽度设置为 100%？

好的，我会尽快更新你..

@user1433479 我在查询中找不到任何关于scrollTo() 函数的文档，除了这个Plugin

@TilwinJoy 是的，我得到了插件集。它并没有告诉我“scrollTo 不是一个函数”之类的东西，它实际上是滚动的。问题是它让我向下滚动页面而不是水平滚动块。

【参考方案1】：

你可以在不使用插件的情况下实现这一点，使用 css3 transition。

添加以下css：

.content
 position: relative;
 overflow: hidden;
 clear:both;

.content div 
  position:absolute;
  top:0;
  left:0;
  width:100%;
 transition: transform 1s ease-in-out;

.show
 transform:translate(0%);

.hide
 transform:translate(100%);

在您的 html 中，为您要显示的第一个标签添加 show 类，并为其余标签应用 hide 类。

然后将脚本更改为

$(document).ready(function (j) 
  $(document).on('click', '#navlinks a', function () 
    var panel = $(this).data('href');
    $('.show').toggleClass('hide').toggleClass('show');
    $(panel).toggleClass('hide').toggleClass('show');
  );
);

检查这个JSFiddle

更新

根据cmets，为了兼容旧浏览器，可以结合css使用jQueryanimate()如下：

css:

content
 position: relative;
 overflow: hidden;
 clear:both;

.content div 
 position:absolute;
 top:0;
 width:100%;
 left:100%;

div.shown
 left:0%;

在 HTML 中，为最初应该可见的 div 添加类 shown。

脚本：

$(document).ready(function (j) 
  $(document).on('click', '#navlinks a', function () 
    var panel = $(this).data('href');
    $('.shown').removeClass('shown').css('left','100%');
    $(panel).animate(
        left: '0%'
    ,500, function()
     $(panel).addClass('shown');
    );
  );
);

检查这个JSFiddle

【讨论】：

有一个问题我忘了提：它必须适用于 IE6 及更高版本;_;。有没有办法在没有 CSS3 的情况下实现这一目标？

我已经把它放进去，我可以看到它在 html 代码中将left 属性从 100% 更改为 0%，但这些元素对我来说是不可见的（但不是隐藏/灰色在 html 中输出）。我会用我目前的代码更新我的代码。

我已经更改了我的代码。 “显示”类和 left 属性被完美应用，所以我不认为问题出在 jQuery 上。

@user1433479 请不要根据答案更新问题中的代码，这会混淆未来的读者。如果你想在做某事后分享你所做的事情，创建一个 jsfiddle 并分享它的链接，提到它是一个更新..

我在这里做了一个小提琴：jsfiddle.net/UkP4X。但是在小提琴中我可以看到块，而网页中不是这种情况。

【参考方案2】：

虽然这不是您的问题的答案，但我可以建议您使用 https://github.com/thebird/Swipe 用于 Sliders。它非常宽容，适用于移动设备。

为了更好地了解您的问题，我建议您不要连续格式化 CSS 以获得更好的可读性，并使用类而不是 ID 进行样式设置。

a  
  margin-right:15px;
  cursor:pointer;
  text-decoration:underline;
  color:blue;