当前位置:jQuery学习 > jQuery > jQuery 切换页面布局

jQuery 切换页面布局

时间:2010-11-29QQ群:116983258

让用户自己选择页面的布局,现在已经变得非常普遍了,这样做方便了用户,提高了用户体验。今天刚好看到一个切换页面布局的方法,在这里和大家分享一下,下边就让我们看看使用CSS和jQuery 实现切换页面布局。

首先,我们看看最终的效果图,如下:

jQuery切换页面布局

同上篇一样,CSS样式在这里就不给出了,可以在Demo页里查看到。大体思路就是当用户点击切换的时候,我们改变了引用的CSS样式,下边是jQuery代码。

$(document).ready(function () {
    $("#switch").toggle(function () {
        $(".display").fadeOut("fast", function () {
            //引用新的样式,来改变布局
            $(this).fadeIn("fast").addClass("thumb_view");
        });
    }, function () {
        $(".display").fadeOut("fast", function () {
            $(this).fadeIn("fast").removeClass("thumb_view");
        });
    });
});

使用了toggle事件,它用来交替的执行事件,这样我们就用CSS和简单的jQuery代码实现了改变页面布局的效果。

作者:jQuery学习
除非注明,jQuery学习网文章均为原创,转载时必须以链接形式标明本文地址。
本文地址:http://www.jquery001.com/jquery-switch-display.html

所有话题