js实现页面换肤

        前几天做网页需要实现网页主题的更好，也就是换肤功能，做了一个简单的实例，记录一下：

        主要是选择不同的主题时，根据鼠标的位置动态的加载主题标题，选择时更换网页主题。

        

        主要js代码如下：

         选中主题后，更好网页的主题内容：

 $(".btnSkin").click(function () {
            $(".toolBar").css({ "display": "none" });
            $(".blackPic").slideToggle("slow");
        });
        $("#btnExit").click(function () {
            $(".blackPic").css({ "display": "none" });
            $(".toolBar").slideToggle("slow");
        });
        $(".picture1").click(function () {
            $(".main").css({ "background": "#6CBFE3" });
            $(".body-nav").css({ "background": "#387DC1" });
            $(".layout-avatar").css({ "background": "#387DC1" });
            $(".body-head").css({ "background-image": "url(img/banner.jpg)" });
            $(".blackPic").css({ "background": "#6F8CB4" });
        });
        $(".picture2").click(function () {
            $(".main").css({ "background": "#CEF09A" });
            $(".body-nav").css({ "background": "#95C648" });
            $(".layout-avatar").css({ "background": "#95C648" });
            $(".body-head").css({ "background-image": "url(img/banner1.jpg)" });
            $(".blackPic").css({ "background": "#C6E363" });
        });
        $(".picture3").click(function () {
            $(".main").css({ "background": "#86C9F4" });
            $(".body-nav").css({ "background": "#4563D5" });
            $(".layout-avatar").css({ "background": "#4563D5" });
            $(".body-head").css({ "background-image": "url(img/banner2.jpg)" });
            $(".blackPic").css({ "background": "#54BFF3" });

        });
        $(".picture4").click(function () {
            $(".main").css({ "background": "#76B387" });
            $(".body-nav").css({ "background": "#4B7A72" });
            $(".layout-avatar").css({ "background": "#4B7A72" });
            $(".body-head").css({ "background-image": "url(img/banner3.jpg)" });
            $(".blackPic").css({ "background": "#337061" });

        });
});

        这里数据是写死，也可以动态加载。其实在实现功能之前做一个基本的小例子，会更容易些。