问题的标题可能不是最描述,但基本上我想要做的就是让一个页面,如果用户点击一个链接,是他们目前的活动链接的权利,或滑动向右滑动左如果点击了该链接是他们目前的活动链接的左侧。
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");
}
});
});
相关推荐
最新文章