0

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

当谈到 jQuery 时，我是非常初学者，希望从哪里开始获得一些帮助。我到处寻找教程，但没有这个具体的。如果有人能指出我正确的方向，或者我可以从中学习的模板，那就太好了。

4

2 回答 2

1

您正在寻找的是 jquery animate 函数。

$(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'")'});
    });
});
于 2012-06-26T02:46:18.327 回答
0

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

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

祝你好运。

于 2012-06-26T02:45:17.207 回答