Question

我想要一个水平滑块滑过＆＃34;页面＆＃34;在单个视图上（在Wordpress中）。我的代码几乎正常工作，但不是水平滑动块，而是将页面向下滑动一点（asif按下键盘上的向下按钮）。

这是我的代码：

    <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

Answer 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

<强>更新

根据评论，对于旧的浏览器兼容性，您可以结合使用css并使用jQuery animate()，如下所示：

的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

Answer 2

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

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

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

水平jQuery滑动向下滑动

2 个答案: