前几天做网页需要实现网页主题的更好，也就是换肤功能，做了一个简单的实例，记录一下：
主要是选择不同的主题时，根据鼠标的位置动态的加载主题标题，选择时更换网页主题。
主要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> 这里数据是写死，也可以动态加载。其实在实现功能之前做一个基本的小例子，会更容易些。
