Question

我想编写一个左侧有菜单的网站：

点击此菜单上的某个项目时，该网站会向上或向下滑动（但不应该选择向上或向下滚动）。

然而，现在当用户与网页（而不是菜单）中的内容进行互动时，网站会向右/向左滑动。

因此没有重新加载网站！

例如，菜单包含主页和帐户。

如果用户在首页的和点击的 acount 的现场下滑（但他不应该由他本人向下滚动选项）！

现在上的帐户的时候，他点击一个名为“编辑帐户”网站的幻灯片（但没有菜单）按钮右侧的页面中，他不能编辑自己的帐户时，他打救网站滑回帐户

对于网站，我的意思是内部预先定义的框，当然页眉和页脚不会移动！

这是我在jsfiddle上写的脚本的一个小例子。

我知道这看起来很酷但我不希望用户需要牺牲网站加载速度才能获得很酷的滑动效果！

现在我的问题是：这是一个很好的编程实践吗？

Answer 1

如果我相信你想要的东西，比如我的网站“www.ohlookawebsite.com”，你需要做的就是使用jquery for .show等创建效果，例如

<div id="navagation">

<div id="home" onclick="homeClick()">Home</div>
<div id="about" onclick="aboutClick()">About</div>
<div id="account" onclick="accountClick()">Account</div>

</div>

那将是导航，然后您可以在页面上设置<div> s，其中包含style="display: none;"不应显示的内容，例如;

<div id="boxHome">
Welcome to the home page!
</div>

<div id="boxAbout" style="display: none;">
Welcome To the About Page!
</div>

<div id="boxAccount" style="display: none;>
You're account info!
</div>

您需要使用jquery和javascript来显示不同的“页面”

function homeClick(){
    $("#boxAbout").fadeOut(500);
    $("#boxAccount").fadeOut(500);

    $("#home").css("color", "green");   
    $("#boxHome").delay(500).fadeIn(1000);
}

您可以在此处查看此示例：http://jsfiddle.net/gM4hB/4/

希望这有帮助

动态网页滑动良好的脚本练习？

1 个答案: