html - 动态网页滑动好的脚本实践？

Question

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

单击此菜单上的元素时，网站会向上或向下滑动(但应该没有向上或向下滚动的选项)。

现在，当用户与网页中的某些内容(而非菜单)进行交互时，网站会向右/向左滑动。

所以网站没有重新加载!

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

如果用户在 home 上并点击 acount 网站会向下滑动(但他不应该有自己向下滚动的选项)!

现在在 account 上，当他点击一个名为“Edit Account”的按钮时，网站会向右滑动(但不是菜单)到一个页面，当他点击保存网站时，他可以编辑他的账户 no滑回帐户

对于站点，我指的是内部预定义框，当然页眉和页脚不会移动!

这是我在 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/

希望对你有帮助