我想编写一个左侧有菜单的网站:
单击此菜单上的元素时,网站会向上或向下滑动(但应该没有向上或向下滚动的选项)。
现在,当用户与网页中的某些内容(而非菜单)进行交互时,网站会向右/向左滑动。
所以网站没有重新加载!
例如,菜单包含主页 和帐户。
如果用户在 home 上并点击 acount 网站会向下滑动(但他不应该有自己向下滚动的选项)!
现在在 account 上,当他点击一个名为“Edit Account”的按钮时,网站会向右滑动(但不是菜单)到一个页面,当他点击保存网站时,他可以编辑他的账户 no滑回帐户
对于站点,我指的是内部预定义框,当然页眉和页脚不会移动!
这是我在 jsfiddle 上写的脚本的一个小例子.
我知道这看起来会很酷,但我不希望用户为了炫酷的滑动效果而牺牲网站加载速度!
现在我的问题是:这是好的编程习惯吗?
最佳答案
是的,如果我相信你想要像我的网站“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/
希望对你有帮助
关于html - 动态网页滑动好的脚本实践?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8833125/