我希望创造一种类似于此处所见的效果
http://www.templatemonster.com/demo/42436.html
当按下导航栏上的按钮时,内容从左侧滑入并停留在中心,当按下另一个按钮时,新内容将执行相同操作,旧内容框将保留在右侧。任何帮助将不胜感激,我尝试使用一个大滑块,但导航已关闭,所以任何建议将是一个巨大的奖金!
答案 0 :(得分:0)
可能的解决方案是使用jQuery Plus Anchor插件。
答案 1 :(得分:0)
以与菜单项相同的顺序创建菜单对应的div并给它们每个div相同的类,以及css属性(width,height,position:absolute),然后使用这段代码:
$(document).ready(function(){
$('.active').css('left', ($(window).width() - $('.active').outerWidth())/2);
$('li').click(function(){
var ind = $(this).index(),
activeSlide = $('.active'),
slide = $('.slide').eq(ind);
if(!slide.hasClass('active')){
slide.stop().animate({'left': ($(window).width() - slide.outerWidth()) / 2}, 300);
activeSlide.animate({'left': $(window).width()}, 300, function(){
activeSlide.css('left', - activeSlide.outerWidth());
});
activeSlide.removeClass('active');
slide.addClass('active');
}
});
$(window).resize(function(){
$('.active').css('left', ($(window).width() - $('.active').outerWidth()) / 2);
});
});
请参阅此处的DEMO以获取有关HTML结构和CSS属性的更多详细信息: