使用jQuery实现网页皮肤年轻化的要点分析

换肤是个老技术了，老的现在不怎么流行了。但是，有时候有些客户就是想要这个换肤功能。所以我练了一个换肤网页，结果遇到了很多问题。

网页换肤的基本原理。

基本原理很简单，就是用JS切换对应的CSS样式表。比如导航网站Hao123就有换肤功能。除了切换CSS样式表文件之外，还需要在一般的网页换肤中，通过Cookie记录用户更改的皮肤，以便用户下次访问时可以自动使用用户上次配置的选项。

然后基本的工作流程出来了：访问网页——JS，阅读Cookie ——。如果没有，使用默认皮肤——。如果是，使用指定的皮肤。用户点击换肤选项——JS，控制对应CSS样式表——的替换，将换肤选项写入Cookie保存。

网页换肤需要提前准备。

首先，您可能需要准备多组CSS样式表文件。当您单击“外观更改”按钮时，使用JS切换相应的CSS样式表。之后，就是在网页上添加一个ul li列表，用CSS装饰，做一个换肤选项。例如：

我们来看看具体的功能代码。

点击切换相应的CSS功能。

首先，我们皮肤选项的HTML结构是这样的。

div=" skin " ul Li class=" skin 1 hover "/Li Li class=" skin 2 "/Li Li class=" skin 3 "/Li Li class=" skin 4 "/Li/ul/div然后在网页顶部的下部放置一个空的链接标签。我们将使用jQuery给这个链接标记不同的CSS文件来达到切换的效果。

复制的代码如下： linkrel="样式表" href=" data-href=" style-teal . CSS " type=" text/CSS " media=" screen " class=" skinsslittle "/

其中，我定制了一个data-href属性来存储系统的默认皮肤，这样在加载页面的时候，如果JS没有检测到Cookie中的皮肤信息，就会在data-href中分配内容。然后是熟悉的jQuery代码：

jQuery('。皮李’)。单击(function(){ var currentClass=jQuery(this))。attr(' class ')；jQuery(这个)。兄弟姐妹()。removeClass('悬停')；jQuery(这个)。addClass('悬停')；var cc=currentClass.substring(0，5)；cc=convertcsslittle(cc)；var skincssurl=jQuery('。stylecssurl ')。attr('href ')。子字符串(0，jQuery('。stylecssurl ')。attr('href ')。indexOf(' style ')cc；jQuery('。skincsslot’)。attr("href "，skincsurl)；createCookie('皮肤'，currentClass，365)；});一般的逻辑是获取当前皮肤的类，然后截取皮肤*，再通过一个函数获取其对应的CSS文件。Skincssurl记录网页的非皮肤CSS文件，主要用于获取当前网页的CSS目录url。最后将混合好的CSS皮肤文件分配给准备好的空链接，实现皮肤化。

添加Cookie记录皮肤功能。

这里，两个用户定义的函数主要用于创建和读取Cookie。

函数ReadCookie(name){ var Nameeq=name "="；var ca=document . cookie . split('；');for(var I=0；约1 .长度；I){ var c=ca[I]；while(c . charat(0)==' ')c=c . substring(1，c . length)；if(c . indexof(Nameeq)=0)返回c.substring(nameEQ.length，c . length)；}返回false}函数createCookie(名称、值、天数){ if(days){ var Date=new Date()；date . settime(date . gettime()(days 2460601000))；var expires="；expires=" date . TogMTString()；} else expires=document.cookie=name "="值过期"；路径=/；}您只需要将这两个函数复制到JS代码区。在jQuery的函数代码中，最后一句话创建了一个Cookie。网页加载后，我们需要用JS读取Cookie内容，然后用if判断：

var cccc=readCookie(“皮肤”)；if (cccc){cccc=cccc.substring(0，5)；jQuery(' . 'cccc)。addClass('悬停')。兄弟姐妹()。removeClass('悬停')；CCC=convertcsslittle(cccc)；var skincssurl=jQuery('。stylecssurl ')。attr('href ')。子字符串(0，jQuery('。stylecssurl ')。attr('href ')。indexOf(' style ')CCC；jQuery('。skincsslot’)。attr("href "，skincsurl)；}else{var currentcss=jQuery('。skincsslot’)。attr(" data-href ")；var currentssname=currentsss . substring(currentsss . indexof(' style ')，currentsss . length)；current ssname=default to class(current ssname)；jQuery(' . 'currentcssname)。addClass('悬停')。兄弟姐妹()。removeClass('悬停')；jQuery('。skincsslot’)。attr("href "，jQuery ')。skincsslot’)。attr(" data-href ")；}不要被这样乱七八糟的代码惊呆了。其实逻辑很简单。首先，获取Cookie的皮肤值。如果有，突出显示相应的皮肤选项，并转换它以获得相应的CSS皮肤文件分配。如果没有Cookie内容，则分配data-href属性中记录的值。

网页换肤的闪烁问题及解决方案。

改变网页外观时，会遇到闪烁的问题。也就是说，当点击开关按钮时，颜色会改变，或者图片会闪烁。或者使用Cookie记录后，如果用户使用非默认皮肤，会闪烁，先出现默认样式，再闪烁切换到用户选择的样式。

这种影响用户体验的现象必须彻底消除，但一直没有找到完美的解决方案。因为浏览器的默认是先渲染CSS再加载JS，尤其是用Cookie记录的皮肤，JS可以在渲染完现有的CSS后读取并切换到皮肤。原理如下。客户咨询后，给出了一个“无闪烁”蒙皮效果的例子，这是MG12早期的一个主题。相同的Cookie记录等。但他的作品并不闪烁。

所以我查了他的JS代码，没发现什么特别的。后来我意识到这个闪烁问题在图片比较多的网页中特别有效，因为在切换的CSS中加载图片要花更多的时间。但是在MG12的主题中，切换的CSS文件只换了几个背景色，加载速度太快让你的眼球反应不过来，造成了不眨眼的错觉。

有一些解决方法不完善，点击开关按钮后闪烁也是因为加载图片等。所以我们在访问网页时可以使用预加载技术来预加载其他皮肤图片或者CSS Sprite技术来制作大图。

至于Cookie记录的闪烁，这在浏览器渲染中是一个严重的伤害，只能尽量减少换肤时需要更改的地方，尽可能压缩图片以减少体积。然后先加载没有任何皮肤的基本样式，然后用JS加载默认样式或者读取Cookie获得的皮肤选项。这样，在访问网页时，一开始会显示白色或无颜色，然后直接切换到之前选择的肤色，而不是从默认颜色闪烁到另一种颜色，从而提高了一定的用户体验。