获取页幻灯片左或右取决于当用户点击 [英] Get Page to Slide Right or Left Depending on Where the User Clicked

问题描述

问题的标题可能不是最描述，但基本上我想要做的就是让一个页面，如果用户点击一个链接，是他们目前的活动链接的权利，或滑动向右滑动左如果点击了该链接是他们目前的活动链接的左侧。

The title of the question may not be the most descriptive, but basically what I'm trying to do is get a page to slide right if the user clicks a link that is to the right of their current active link, or slide left if the link clicked is to the left of their current active link.

例如，我有这部分页面：

For example, I have this part of a page:

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

如果我点击标题元素的链接的类名为yourehere元素的权利，我想在页面上滑动，如果我点击一个链接到类的左向右或滑块向左yourehere

And if I click a link in the header element to right of the element whose class is named 'yourehere', I would like the page to slide right or slide left if I click a link to the left of the class 'yourehere'.

我有这样缩短下来的JavaScript code，它通过AJAX加载的内容，当它完成加载我可以向右滑动页面：

I have this shortened down JavaScript code that loads content via AJAX and when it finishes loading I get the page to slide right:

$(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幻灯片两类：

These are the two classes used to make the div slide in right:

.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;
}

如果任何人有关于如何做我想要实现，这将是极大的AP preciated任何信息或技术。该 Krimper 网站是什么我一个很好的例子中号试图实现。 干杯：）

If anyone has got any information or techniques on how to do what I'm trying to achieve that would be greatly appreciated. The Krimper website is a perfect example of what I'm trying to achieve. Cheers :)

推荐答案

喜欢这个？

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

    });
});

这篇关于获取页幻灯片左或右取决于当用户点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！