网页换肤是一门老技术了，老的现在都不怎么流行了。但是，有时候有些客户就是想要这个换肤功能。于是就实践做了一下网页换肤，结果遇到了很多问题。

网页换肤的基本原理

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

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

网页换肤事先需要的准备

首先你可能要准备多套 CSS 样式表文件，当点击换肤按钮的是，使用 JS 来切换对应的 CSS 样式表。之后，就是在网页上增加一个 ul li 列表，用 CSS 修饰一下做成换肤选项。例如：

下面我们就来看具体功能代码。

实现点击切换对应 CSS 功能

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

<div class="skin">
    <ul>
        <li class="skin1 hover"></li>
        <li class="skin2"></li>
        <li class="skin3"></li>
        <li class="skin4"></li>
    </ul>
</div>

然后在网页的顶部偏下的位置放上一个空的 link 标签，我们将会使用 jQuery 为这个 link 标签赋予不同的 CSS 文件实现切换效果

<link rel="stylesheet" href="" data-href="style-Teal.css" type="text/css" media="screen" class="skincsslittle" />

其中，我自定义了一个 data-href 属性来存放系统默认的皮肤，这样当页面加载完成之后，如果 JS 没有检测到 Cookie 中的皮肤信息，就会把 data-href 中的内容赋值上去。之后就是大家熟悉的 jQuery 代码：

jQuery('.skin li').click(function(){
    var currentClass = jQuery(this).attr('class');
    jQuery(this).siblings().removeClass('hover');
    jQuery(this).addClass('hover');
    var cc = currentClass.substring(0,5);
    cc = convertcsslittle(cc);
    var skincssurl = jQuery('.stylecssurl').attr('href').substring(0,jQuery('.stylecssurl').attr('href').indexOf('style')) + cc;
    jQuery('.skincsslittle').attr("href",skincssurl);

    createCookie('skin',currentClass,365);
});

大体的逻辑就是获取到当前皮肤的 class 然后截取出来 skin* 然后通过一个函数得到其对应的 CSS 文件。skincssurl 记载的是网页的非皮肤 CSS 文件，主要用来获取当前网页的 CSS 目录 URL ，最后将混合好的 CSS 皮肤文件赋值准备好的空 link 中，实现换肤。

增加 Cookie 记录皮肤功能

这里主要用到两个自定义的函数，用来创建、读取 Cookie 内容。

function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return false;
}

function createCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}

你只需要把这两个函数复制到 JS 代码区域即可。在 jQuery 点击换肤的功能代码中，最后一句就创建了一个 Cookie，等网页加载完成之后，我们需要使用 JS 读取 Cookie 内容，然后使用 if 判断：

var cccc = readCookie("skin");

if (cccc){
    cccc = cccc.substring(0,5);
    jQuery('.'+cccc).addClass('hover').siblings().removeClass('hover');
    ccc = convertcsslittle(cccc);
    var skincssurl = jQuery('.stylecssurl').attr('href').substring(0,jQuery('.stylecssurl').attr('href').indexOf('style')) + ccc;
    jQuery('.skincsslittle').attr("href",skincssurl);
}else{
    var currentcss = jQuery('.skincsslittle').attr("data-href");
    var currentcssname = currentcss.substring(currentcss.indexOf('style'),currentcss.length);
    currentcssname = defaulttoclass(currentcssname);
    jQuery('.'+currentcssname).addClass('hover').siblings().removeClass('hover');
    jQuery('.skincsslittle').attr("href",jQuery('.skincsslittle').attr("data-href"));
}

不要被这么乱的代码吓晕了，实际上逻辑很简单，先获取 Cookie 的皮肤值，如果有就为对应的皮肤选项高亮并且转换得到对应的 CSS 皮肤文件赋值。如果没有 Cookie 内容，就将 data-href 属性中记录的值赋值进去。

网页换肤的闪烁问题和不完美解决方案

网页换肤中，会遇到闪烁的问题。就是当点击切换按钮的时候，更换颜色或者图片会闪烁一下。或者使用 Cookie 记录之后，用户使用了非默认的皮肤，也会闪烁一下，先出现默认的样式然后再闪烁切换成用户自己选择的样式。

这种影响用户体验的现象肯定要彻底消灭，但是一直没有找到完美的解决方法。因为浏览器默认的是优先渲染 CSS 之后再加载 JS，特别是使用 Cookie 记录的皮肤，先渲染现有的 CSS 之后，JS 才能读取然后切换到皮肤。原理是这样的，跟客户协商之后，客户给出了一个“无闪烁”的换肤效果示例，是 MG12 很早的一款主题。同样的 Cookie 记录等，但是他的作品确实没有闪烁情况。

于是我就查看了他的 JS 代码，没有发现特殊之处，后来才想明白，这种闪烁问题，在图片比较多的网页中效果尤其明显，因为切换的 CSS 需要加载图片需要更多时间。而 MG12 那款主题中，切换的 CSS 文件只是改变了几个 background 颜色，加载速度快到你眼球反应不过来就造成了不闪烁的假象。

不完美解决方案也是有的，点击切换按钮之后的闪烁情况，也是因为要加载图片等，那么我们可以在访问网页的时候，使用预加载技术将其他皮肤图片预加载或者使用 CSS Sprite 技术做成一张大图片。

至于 Cookie 记录闪烁的问题，这是浏览器渲染的硬伤，只能尽量减少换肤需要改变的地方，尽量压缩图片减小体积。然后优先加载没有任何皮肤的基础样式，之后使用 JS 加载默认样式或者读取 Cookie 获取的皮肤选项。这样处理，访问网页的时候会先显示白色或者无颜色，之后直接切换成之前选择的皮肤的颜色，而不会从默认的颜色闪烁变成另一种颜色从而提升一定的用户体验。

如果你在这方面有经验，知道更好的解决闪烁问题的方法，麻烦跟我说一下哈，先谢过了！

近期的一个任务中，客户要求增加一个附带 cookie 记录的网站换肤功能。

网站换肤是老东西了，大体的思路就是写上一些 li 作为皮肤选项，点击之后使用 JavaScript 代码，修改网页中引用的 CSS 文件，达到换肤的目的。为了提供更好的用户体验，可以增加 cookie 记录功能，记录当前用户选择的皮肤。当下次用户再访问的时候，先读取 cookie 的内容，然后根据 cookie 内容自动切换到上次选择的皮肤。

出现问题

很正常的写完了 JavaScript 代码，测试都已经通过，在 IE10 的 IE7、8、9 渲染模式下也测试通过。这时候，客户反馈在 XP 下的 IE8 有问题：初次登陆无法显示默认皮肤、点击切换刷新之后无法显示切换后的皮肤。

因为是通过 cookie 来判断是否显示默认皮肤还是上次用户选择的皮肤，所以很理所当然就想到了无法读取 cookie 。启动 VMware 虚拟机，打开 IE8 和 IE Developer ToolBar 工具进行调试，发现点击之后 cookie 已经成功的创建，但是代码无法执行，使用控制台看了一下问题，原来是不支持 console 。

XP 下的 IE 浏览器不支持 console 命令

console 命令是控制台命令，用来调试 JavaScript 代码用的，通常使用 console.log() 函数来代替 alert() 来迅速得到某变量的内容等。由于 XP 下的 IE 不支持 console，导致后续代码无法运行。

解决方法就是删掉所有调试用的语句，这时候已经可以显示默认的皮肤样式了。

XP 下的 IE 浏览器不支持某些创建 cookie 的语句

这里之所以说某些，是因为我也不知道哪句代码写的不完善。当我使用最基础的 alert(document.cookie) 返回所有的 cookie 内容时，返回值为空，使用 cookie 读取函数读取某值的时候，返回 undefined 。而在其他浏览器中都可以正常返回。

而奇怪的地方在于，我使用 IE developer toolbar 调试的时候，可以看到当前浏览器下面有 cookie 值。最初我以为是 cookie 读取函数写的有问题，因为毕竟有 cookie 的内容却读取不出来。前后换了 5 个不同写法的 cookie 读取函数。后来一想不对，因为使用 alert(document.cookie) 也无法返回任何内容，IE 不会连 document.cookie 都不支持吧？！难道是因为 cookie 生成函数？

这时候，客户给了个功能类似的示例网站，我打开测试了一下功能正常。既然别人的正常，肯定能实现。我阅读了一下它的代码，换肤功能使用的 styleswitcher.js 这个 JS 插件做出来的。由于实现步骤与现有网站不符，我无法使用这个插件整合，只能把它的生成 cookie 、读取 cookie 的函数抠下来用。代码如下：

function readCookie(name) {
  var nameEQ = name + “=”;
  var ca = document.cookie.split(‘;’);
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==’ ‘) c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return false;
}

function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days2460601000));
var expires = “; expires=”+date.toGMTString();
}
else expires = “”;
document.cookie = name+”=”+value+expires+”; path=/“;
}
然后问题就解决了，仔细看了一下代码，我写的也差不多，没有看出问题在哪。日后再仔细研究一下吧，如果你遇到了这样的问题，不妨使用上面这两个函数操作 cookie ，如果你知道问题所在，还望告知！

放屁绝对不是一个很高雅的行为，但是如果你比较喜欢恶搞，或者在愚人节，或者是一些比较特殊的网页设计中，可以通过 fartscroll.js 这个插件让你的网页在滚动的过程中 放屁。

直接打开 fatscroll.js 的官方页面（http://theonion.github.io/fartscroll.js/），滚动一下，你就可以听到了放屁声音了，你滚动的距离和速度不同，放屁的声音也不同。

使用方法也很简单，先下载插件包，解压出来之后，在网页中引入 fartscroll.min.js 这个文件，然后配置下面的参数等，启用这个插件：

    // 在文档中滚动 400 像素就放屁
    $(document).fartscroll();

// 文档中每滚动 800 像素就放屁
$(document).fartscroll(800);

// 网页中没滚动 100 像素就放屁
$("body").fartscroll(100);

// 很多很多的屁
$("body").fartscroll(5);</pre>

仅供娱乐和恶搞哈，相信应该没有太多人喜欢在访问你网页的时候，听到你网页在放屁哈哈。

jQuery 2.0 发布了，然后不支持 IE 6、7、8 ，精简了很多，据说效率提高了一些。具体的特性什么的，发表在了 我爱水煮鱼 上面，这里就不再赘述了，就是说这么一件事，然后想要看具体特性的，可以打开这里：http://blog.wpjam.com/2013/04/19/jquery-2-0/

JavaScript 脚本语言的执行，是需要触发的。一般的做法就是在网页中，直接编写几个函数，有的在代码被加载的时候就被浏览器处理，或者使用类似下面的代码来触发实现函数的相关功能。

<div id=”link” onclick=”fun()” ></div>

上面代码的意思就是，当鼠标点击 id 为 link 的元素的时候，就触发了它的 onclick 事件，然后执行使用 JavaScript 定义的 fun 函数。这样的做法肯定是很不合理的，因为触发操作直接写进了 HTML 结构里面，内容和行为没有隔离开，对日后的二次开发或者修改带来不便。

需要注意的是，当事件处理与对应元素绑定起来的时候，只有在那个元素加载完之后才能进行操作。如果说把处理的脚本放在了 head 区域，浏览器会报错。因为下面的 HTML 元素还没有加载出来，head 中的处理脚本已经被处理了。

一个好的执行 JavaScript 代码的方法应该是 行为内容分离的、在页面加载后处理 的。所以，处理 JavaScript 代码我们要用到 监听器 和 window 对象的 load 事件。

监听器

监听器实际上的功能就是行为与内容分离的。以前需要在 HTML 中加上一些触发事件来触发 JavaScript 的相关函数，而现在直接在 JavaScript 中对某个元素的使用监听器，监听这个元素的事件，如果这个元素被触发了某些事件，在监听器中又定义了这个事件对应的处理函数，那么就会处理这个函数。

W3C 的标准方法叫做 addEventListener ，被IE9，chrome，firefox，opera所支持，写法：

window.addEventListener(‘load’,function,false);

早期 IE 中有 attachEvent 方法效果类似：

window.attachEvent(‘onload’,function);

使用监听器的方法也很简单，就是先获取页面中的某个元素，然后对这个元素使用监听器，定义监听的事件和对应的事件处理函数，就上文例子：

document.getElementById(‘link’).addEventListener(‘click’,fun,false);

关于监听器更加详细的使用说明，请见文末补充资料。

window.onload 事件

onload 事件只有在整个页面已经完全载入的时候才会被触发，我们将 JavaScript 代码写进 onload 事件中，就可以保证在 HTML 元素被加载完成之后，浏览器才会处理我们的 JavaScript 代码。基础的写法：

window.onload = function(){
 //code
}

这样，这个函数里面的 code 会在加载完成之后被处理。但是，这种方法有个缺陷，就是只能用于这一个函数。页面中无法出现多个 window.onload 事件，如果出现了多个 onload 事件，那么后面的内容会覆盖前面的。

那么，我们可以这样做，在一个 window.onload 事件中，写上所有需要加载的函数名，然后在外面定义函数：

window.onload = function(){
   func1();
   func2();
 }

function func1(){…}
function func2(){…}
这样做虽然可以，但是很不方便，因为我们需要把所有要加载的函数名都写进去，修改起来就会很麻烦。当然办法肯定是有的，jQuery 就特别提供了很强大的多脚本加载方法，那么原生的 JavaScript 肯定也有办法。

window.onload 同时处理多个函数

我们需要编写一个处理函数，先看一下代码：

    function addLoadListener(fn){
        if (typeof window.addEventListener != ‘undefined’){
            window.addEventListener(‘load’,fn,false);
        }else if(typeof document.addEventListener != ‘undefined’){
            document.addEventListener(‘load’,fn,false);
        }else if (typeof window.attachEvent != ‘undefined’){
            window.attachEvent(‘onload’,fn);
        }else{
            var oldfn = window.onload;
            if(typeof window.onload != ‘function’){
                window.onload = fn;
            }else{
                window.onload = function(){
                    oldfn();
                    fn();
                };
            }
        }
    }

简单的来解析一下，这个自定义的 addLoadListener 函数，传递一个 函数名称 作为参数。它首先判断浏览器是否支持相关的 监听器，如果支持 监听器，就使用 监听器 监听 window 对象的 onload 事件，然后处理这个函数。这段代码使用 if 语句判断了所有浏览器的监听事件，是跨浏览器兼容的。

我们把这段代码放在 JavaScript 代码段的最上面，然后在下面定义相关函数，然后使用下面语句来加载 JavaScript 函数了。

addLoadListener(func);
function func() {…}

这样，有什么 JavaScript 函数是需要在页面加载完成之后处理的，直接使用 addLoadListener 函数即可，而且可以使用多个。通常来说，所有的 JavaScript 最好都使用 onload 事件加载，以避免意外情况发生。

引用和补充资料

• 这段代码来自《JavaScript 精粹（修订版）》 一书
• addEventListener 百度百科介绍
• addEventListener 和 attachEvent用法
• 道听途说之JavaScript事件监听器
• javascript中addEventListener方法和removeEventListener方法

jQuery 提供了一些诸如 show、hide、slideUp、fadeIn 等等动画方法，可以方便的切换元素的显隐。更有强大的自定义动画方法 animate ，可以实现很多动画效果。为了让动画有好的过渡变化过程，官方为这些方法设置 easing 属性，但是官方没有给出很多过渡效果。

jquery.easing.js 这个插件，增加了很多过渡效果，引入之后可以让动画过渡过程更加多样化。

先来看一下：Demo。官方也有案例：打开官方主页。

如何使用 jquery.easing.js

第一步 引入插件

jQuery 插件嘛，当然要先引入 jQuery，然后再引入 jquery.easing.js 。

<script type=”text/javascript” src=”http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
<script type=”text/javascript” src=”http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>

然后再在引入代码下面编写调用的 Javascript 代码，注意代码顺序。

第二步 启用插件

首先先假设使用 animate 方法把网页上的 class 为 aa 的 div 的宽度，从原本的 300px 变成 600px。按照 animate 的写法，加上 easing 。

$(‘.aa’).animate( {‘width’:’600’} , { duration:1000,easing:’easeInOutCirc’ });

这样，就对 aa 对象，启用了一个 easeInOutCirc 过渡效果，在 1000毫秒 内变成 600px。

可以应用的动画方法

不仅仅支持 animate 方法，还支持 hide、show、slideDown、slideUp、fadeIn、fadeOut等等支持 easing 的动画方法。只需要按照官方对应的格式去写就可以，这个插件相当于扩充了官方的过渡效果样式。

插件的参数

这个插件有三个参数：duration、easing、complete。

duration 参数

用来指定动画变化的时间，以毫秒为单位。

easing 参数

指定这个动画要使用何种过渡样式。具体的过渡样式名和效果，需要在官方主页上查看左边的 “Example”，选择找到自己想要的效果。

complete 参数

设置一个回调函数，当动画完成之后，执行这个函数。

其他注意事项

使用 slideUp 动画方法

slideUp 这类的动画方法，要比 animate 简单一些，不需要复杂的属性参数，所以可以直接这样写：

$(element).slideUp(1000, method, callback});
$(element).slideUp({ duration: 1000, easing: method, complete: callback});`</pre>
其他的 hide 、show 之类的方法，自行类比。

### 指定默认的 easing 样式

在使用中 easing 参数是可以省略的，省略之后，就会调用默认的过渡样式。可以使用下面一句代码，指定默认的动画过渡样式。
<pre>`jQuery.easing.def = "过渡样式名，例如 easeInOutCirc";

用起来挺简单的，但是有了更和谐的变化效果，可以增强用户体验。更多用法欢迎观看 Demo 。