如何处理jQuery中的许多元素

我希望创建一个由不同面板组成的网站。假设有4个面板。每个面板在给定的时间点占据整个屏幕，看起来类似于下面的

--------------------------------
|     home     ||     about    |
|    a menu    ||    a menu    |
|              ||              |
--------------------------------
--------------------------------
|    contact   ||     jobs     |
|    a menu    ||    a menu    |
|              ||              |
--------------------------------

假设我现在点击主页上的"工作"链接。我希望屏幕垂直滚动动画，滚动到包含所有项目的容器的右下角。

这不是一个太大的问题，我知道我可以实现与一个插件，如ScrollTo。

现在想象一下，我有16页而不是4页。这个插件可以很容易地缩放，但由于页面上存在如此多的元素(每个面板包含图像，文本，菜单，标题等)，网站速度大大降低。

我可以解决这个问题，当我已经在一个给定的页面，通过隐藏所有其他页面——但是我怎么能处理所有的元素，而从一个面板动画到另一个?对实现有什么想法吗?

谢谢!

不要把所有的东西都加载到DOM中，使用ajax，加入你需要的，删除你不需要的。我曾经做过一个和你描述的非常相似的网站，我选择了"将所有内容隐藏在dom中"的路线，我最终不得不重新编写部分内容来使用ajax，因为页面加载时间太长了。

2Cents:

默认情况下，除活动面板外的所有面板都是隐藏的，并且有一个额外的css类(例如:"panel-simplified")
panel-simplified将布局减少到绝对最低限度:没有高级css3技术，只显示选定的内容，甚至可能是虚拟内容
点击目标面板获得完整的美感/失去面板-简化
仅显示"传递"的必要面板(最小:2个面板，最大:~ 10个面板(0,0)-> (4/4))

。(0,0) ->(2,2)之前的状态。没有标签的隐藏面板。

----------------------------------------------------------------
|    (0,0)     ||     (1,0)    ||     (2,0)    ||     (3,0)    |
|    FULL      ||      SIMP    ||              ||              |
----------------------------------------------------------------
----------------------------------------------------------------
|    (0,1)     ||     (1,1)    ||     (2,1)    ||     (3,1)    |
|     SIMP     ||     SIMP     ||      SIMP    ||              |
----------------------------------------------------------------
----------------------------------------------------------------
|    (0,2)     ||     (1,2)    ||     (2,2)    ||     (3,2)    |
|              ||     SIMP     ||      FULL    ||              |
----------------------------------------------------------------
----------------------------------------------------------------
|    (0,3)     ||     (1,3)    ||     (2,3)    ||     (3,3)    |
|              ||              ||              ||              |
----------------------------------------------------------------

不知道你的HTML代码如何，但我同意sjobe的建议。

我猜你们的菜单是这样的:

<ul id='menu'>
    <li><a href='#home'>home</a></li>
    <li><a href='#about'>about</a></li>
    <li><a href='#contact'>contact</a></li>
    <li><a href='#jobs'>jobs</a></li>
</ul>

和一些div，如:

<div id='container'>
    <div id='home'></div>
    <div id='about'></div>
    <div id='contact'></div>
    <div id='jobs'></div>
</div>

现在javascript:

// when DOM's ready
$(document).ready(function() {
    // get the current hash or default to #home if none
    hash = window.location.hash ? window.location.hash : '#home';
    // construct the file name to load
    file = hash.replace('#', '/') + '.html';
    // load the file to the div
    $(hash).load(file);
    // and scroll to it
    $.scrollTo(hash, 800, {easing:'elasout'});
    // and create handler for menu click
    $('#menu a').click(function(event) {
        event.preventDefault();
        hash = this.hash;
        $.scrollTo(hash, 800, {easing:'elasout'});
        });
    });
// when page (incl scripts, styles, images, etc) ready
$(window).load(function() {
    // iterate through each menu
    $('#menu a').each(function() {
        // get its hash
        hash = this.hash;
        // construct the file name to load
        file = hash.replace('#', '/') + '.html';
        // preload the file to the div
        $(hash).load(file);
        });
    });

你的元素应该有有意义的id属性。你应该有一个字典来保存所有id的位置信息。然后你可以通过这些位置值来计算想要的移动方向。比如

从(2,4)移动到(4,2)

，所以你计算你将向下和向左移动。对于速度变慢的问题，您应该只在这些面板上使用html元素(以及至少一个背景图像标识符)，并且可以在制作替换动画后使用ajax调用加载信息。

相关内容

最新更新

热门标签：