js实现页面换肤

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

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

        

        主要js代码如下：

<span style="font-size:18px;"><script type="text/javascript">
        ; (function ($) {
            $.fn.extend({
                show: function (div) {
                    var w = this.width(),
						h = this.height(),
						xpos = w / 2,
						ypos = h / 2,
						eventType = "",
						direct = "";
                    this.css({ "overflow": "hidden", "position": "relative" });
                    div.css({ "position": "absolute", "top": this.width() });
                    this.on("mouseenter mouseleave", function (e) {
                        var oe = e || event;
                        var x = oe.offsetX;
                        var y = oe.offsetY;
                        var angle = Math.atan((x - xpos) / (y - ypos)) * 180 / Math.PI;
                        if (angle > -45 && angle < 45 && y > ypos) {
                            direct = "down";
                        }
                        if (angle > -45 && angle < 45 && y < ypos) {
                            direct = "up";
                        }
                        if (((angle > -90 && angle < -45) || (angle > 45 && angle < 90)) && x > xpos) {
                            direct = "right";
                        }
                        if (((angle > -90 && angle < -45) || (angle > 45 && angle < 90)) && x < xpos) {
                            direct = "left";
                        }
                        move(e.type, direct)
                    });
                    function move(eventType, direct) {
                        if (eventType == "mouseenter") {
                            switch (direct) {
                                case "down":
                                    div.css({ "left": "0px", "top": h }).stop(true, true).animate({ "top": "0px" }, "fast");
                                    break;
                                case "up":
                                    div.css({ "left": "0px", "top": -h }).stop(true, true).animate({ "top": "0px" }, "fast");
                                    break;
                                case "right":
                                    div.css({ "left": w, "top": "0px" }).stop(true, true).animate({ "left": "0px" }, "fast");
                                    break;
                                case "left":
                                    div.css({ "left": -w, "top": "0px" }).stop(true, true).animate({ "left": "0px" }, "fast");
                                    break;
                            }
                        } else {
                            switch (direct) {
                                case "down":
                                    div.stop(true, true).animate({ "top": h }, "fast");
                                    break;
                                case "up":
                                    div.stop(true, true).animate({ "top": -h }, "fast");
                                    break;
                                case "right":
                                    div.stop(true, true).animate({ "left": w }, "fast");
                                    break;
                                case "left":
                                    div.stop(true, true).animate({ "left": -w }, "fast");
                                    break;
                            }
                        }
                    }
                }
            });
        })(jQuery)
        $(".outer").each(function (i) {
            $(this).show($(".inner").eq(i));
        });
		
	</script></span>

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

<span style="font-size:18px;"> $(".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" });

        });
});</span>

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