实现换皮肤效果的javascript代码
我们经常会看到QQ这类网站可以让用户自定义网站的皮肤效果，下面我们来讲述一下如何实现换皮肤的js实现 方法 。 这三个节点的默认皮肤是三种颜色，每个节点可以独立换肤，而且互
我们经常会看到QQ这类网站可以让用户自定义网站的皮肤效果，下面我们来讲述一下如何实现换皮肤的js实现 方法 。
这三个节点的默认皮肤是三种颜色，每个节点可以独立换肤，而且互不影响。某个节点的皮肤一旦更换，这个节点下的列表页和内容页的皮肤也会跟随着一起更换。这个换肤实现的方法如下:
分析源代码可以发现几个要点
1， 首先网页顶部要加载四个文件：
这里的重点在于要给CSS文件ID，还有默认的皮肤路径，换肤的原理就是通过更换文件夹路径读取不同的CSS和图片从而达到换肤的效果。
2，
这里是切换皮肤的按钮区域的结构代码
3， 最后在页面里插入以下代码：
这里要注意的是ID要与加载CSS的ID对应上。
在每个页面都加上以上三点就可以实现联动换肤，最后怎么实现节点之前互不影响的换肤，只用更改第3点中末尾处(".theme li","theme2","cur")中间的theme2这个参数。
这三个节点的默认皮肤是三种颜色，每个节点可以独立换肤，而且互不影响。某个节点的皮肤一旦更换，这个节点下的列表页和内容页的皮肤也会跟随着一起更换。这个换肤实现的方法如下:
分析源代码可以发现几个要点
1， 首先网页顶部要加载四个文件：
这里的重点在于要给CSS文件ID，还有默认的皮肤路径，换肤的原理就是通过更换文件夹路径读取不同的CSS和图片从而达到换肤的效果。
2，
这里是切换皮肤的按钮区域的结构代码
3， 最后在页面里插入以下代码：
| 代码如下 | |
| <script language="javascript" type="text/javascript"> (function(e,d,c){var b=["#css_zwp"];var a=function(g){var f=$(b[0]).attr("href").split("/")[$(b[0]).attr("href").split("/").length-2];$.each(b,function(h){if($(b[h]).size()!=0){$(b[h]).attr("href",$(b[h]).attr("href").replace(f,g.find("a").attr("rel")))}})};if($.cookie(d)==null){$(e).each(function(f){var g=$(b[0]).attr("href").split("/")[$(b[0]).attr("href").split("/").length-2];if($(this).find("a").attr("rel")==g){$(this).parent().children().removeClass(c).eq(f).addClass(c)}})}else{a($(e).eq($.cookie(d)));$(e).removeClass(c).eq($.cookie(d)).addClass(c)}$(e).click(function(g){a($(this));var h=$(this).parent().children();var f=$.inArray(this,h);$.cookie(d,f,{path:"/",expires:new Date(new Date().getTime() 24*3600*100)});h.removeClass(c).eq(f).addClass(c);g.stopPropagation()})})(".theme li","theme2","cur"); (function(e,d,c){var b=["#css_zw"];var a=function(g){var f=$(b[0]).attr("href").split("/")[$(b[0]).attr("href").split("/").length-2];$.each(b,function(h){if($(b[h]).size()!=0){$(b[h]).attr("href",$(b[h]).attr("href").replace(f,g.find("a").attr("rel")))}})};if($.cookie(d)==null){$(e).each(function(f){var g=$(b[0]).attr("href").split("/")[$(b[0]).attr("href").split("/").length-2];if($(this).find("a").attr("rel")==g){$(this).parent().children().removeClass(c).eq(f).addClass(c)}})}else{a($(e).eq($.cookie(d)));$(e).removeClass(c).eq($.cookie(d)).addClass(c)}$(e).click(function(g){a($(this));var h=$(this).parent().children();var f=$.inArray(this,h);$.cookie(d,f,{path:"/",expires:new Date(new Date().getTime() 24*3600*100)});h.removeClass(c).eq(f).addClass(c);g.stopPropagation()})})(".theme li","theme2","cur"); </script> | |
精彩图集
精彩文章