Question

我正在尝试创建类似于this但没有任何子菜单的内容。当我点击导航项时，背景图像会发生变化，内容会像this一样滑出（这就是测试网站看起来像是这样），并且框内有各种内容。

关于jQuery，我是初学者，想要从哪里开始帮助。我到处寻找教程但没有具体的内容。如果有人能指出我正确的方向，或者我可以从中学到的模板那将是伟大的。

Answer 1

您正在寻找的是jquery动画功能。

$(document).ready(function() {
    $('#buttonID').click(function() {
        $('#divToSlide').animate({width: 'toggle'});
    });
});

您可以在此处找到更多信息： http://www.learningjquery.com/2009/02/slide-elements-in-different-directions

对于更改背景，您可以使用jquery在单击时设置css背景属性

var $backgroundURL = www.imageURL.com/image.jpg;
$('#divToChange').css({'background-image':'url("'+$backgroundURL'")'});

完整的代码如下所示：

$(document).ready(function() {
    $('#buttonID').click(function() {
        $('#divToSlide').animate({width: 'toggle'});
        var $backgroundURL = www.imageURL.com/image.jpg;
        $('#divToChange').css({'background-image':'url("'+$backgroundURL'")'});
    });
});

Answer 2

http://buildinternet.com/project/supersized/slideshow/3.2/fade.html

一个好的开始。使用选项禁用所有选项：http://buildinternet.com/project/supersized/docs.html#options_docs

将菜单置于上方，然后点击淡入到使用API调用的相应图像：http://buildinternet.com/project/supersized/docs.html#api_docs

现在使用css positiong和z-index

将菜单置于此上方

将点击事件添加到您的菜单项

单击菜单项时，请执行以下操作：

goto corresponding slide image
show corresponding content

首先显示/隐藏相应的内容，然后使用动画功能为宽度或动画位置设置动画。

祝你好运。

使用jQuery和背景图像更改的内容滑出的垂直导航

2 个答案: