Question

问题的标题可能不是最具描述性的，但基本上我尝试做的是如果用户点击其当前活动链接右侧的链接，则向右滑动页面，如果点击的链接位于其当前活动链接的左侧，则向左滑动。

例如，我有一个页面的这一部分：

<header>
    <nav>
        <ul>
            <li><a href="/page/about">About</a></li>
            <li><a href="/page/contact">Contact</a></li>
            <li><a href="/page/services" class="yourehere">Services</a></li>
            <li><a href="/page/other">Other</a></li>
        </ul>
    </nav>
</header>

<section id="content">
     Page content here
</section>

如果我点击标题元素右侧的链接，其中的类名为＆＃39;你就是＆＃39;，如果我点击左边的链接，我希望页面向右滑动或向左滑动这个班级＆＃39;你在哪里＆＃39;。

我有这个缩短的JavaScript代码，通过AJAX加载内容，当它完成加载时，我得让页面向右滑动：

$(function() {

var History = window.History;
if ( !History.enabled ) {
    return false;
}

History.Adapter.bind(window, 'statechange', function() {
    var State = History.getState();
    $.get(State.url, function(response) {

        var ajax_div = '#content';

        $(ajax_div).html(response).addClass('animated slideInRight');

    });

});


$('body').on('click', '.ajax', function(event) {
    $('header nav ul li a').not(this).removeClass('yourehere');
    $(this).parent().addClass('yourehere');

    event.preventDefault();
    History.pushState(null, $(this).text(), $(this).attr('href'));
});

});

这是用于使div滑动的两个类：

.animated {
-webkit-animation-duration: .4s;
animation-duration: .4s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}

@keyframes fadeInRight {
0% {
opacity: 1;
-webkit-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}

100% {
opacity: 1;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
}

.fadeInRight {
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight;
}

如果有人有任何关于如何做我想要实现的信息或技术，那将非常感激。 Krimper网站是我努力实现的完美范例。干杯：）

Answer 1

喜欢这个吗？

$(document).ready(function(){
    $("a").click(function(){
        if($(this).offset().left>$(".yourehere").offset().left){
            alert("SLide right");
        }else{
            alert("SLide left");
        }

    });
});

获取页面向右或向左滑动，具体取决于用户单击的位置

1 个答案: