使用jQuery实现Web页面换肤功能的要点解析


Posted in Javascript onMay 12, 2016

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

网页换肤的基本原理

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

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

网页换肤事先需要的准备

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

使用jQuery实现Web页面换肤功能的要点解析

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

实现点击切换对应 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()+(days2460601000));
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 获取的皮肤选项。这样处理,访问网页的时候会先显示白色或者无颜色,之后直接切换成之前选择的皮肤的颜色,而不会从默认的颜色闪烁变成另一种颜色从而提升一定的用户体验。

Javascript 相关文章推荐
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
Feb 23 Javascript
eval的两组性能测试数据
Aug 17 Javascript
jquery数组封装使用方法分享(jquery数组遍历)
Mar 25 Javascript
jquery中attr和prop的区别分析
Mar 16 Javascript
jQuery使用deferreds串行多个ajax请求
Aug 22 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
Dec 15 Javascript
javascript中call,apply,bind函数用法示例
Dec 19 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
Jan 11 Javascript
jQuery+ajax实现动态添加表格tr td功能示例
Apr 23 jQuery
js最全的数组的降维5种办法(小结)
Apr 28 Javascript
vue.js实现h5机器人聊天(测试版)
Jul 16 Javascript
用JS创建一个录屏功能
Nov 11 Javascript
JS定义类的六种方式详解
May 12 #Javascript
值得分享和收藏的Bootstrap学习教程
May 12 #Javascript
jQuery中$.each()函数的用法引申实例
May 12 #Javascript
判断JS对象是否拥有某属性的方法推荐
May 12 #Javascript
JavaScript的模块化开发框架Sea.js上手指南
May 12 #Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
May 12 #Javascript
jQuery CSS3自定义美化Checkbox实现代码
May 12 #Javascript
You might like
PHP--用万网的接口实现域名查询功能
2012/12/13 PHP
ThinkPHP3.1新特性之Action参数绑定
2014/06/19 PHP
Sample script that displays all of the users in a given SQL Server DB
2007/06/16 Javascript
点击button获取text内容并改变样式的js实现
2014/09/09 Javascript
Javascript实现鼠标右键特色菜单
2015/08/04 Javascript
向JavaScript的数组中添加元素的方法小结
2015/10/24 Javascript
JS显示日历和天气的方法
2016/03/01 Javascript
Angular.js中用ng-repeat-start实现自定义显示
2016/10/18 Javascript
详解JavaScript中this的指向问题
2017/01/20 Javascript
通过seajs实现JavaScript的模块开发及按模块加载
2019/06/06 Javascript
在vue中使用回调函数,this调用无效的解决
2020/08/11 Javascript
js实现点击按钮随机生成背景颜色
2020/09/05 Javascript
[01:29]2014DOTA2展望TI 剑指西雅图DK战队专访
2014/06/30 DOTA
[01:15:29]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第三局
2016/03/04 DOTA
Python中字符串对齐方法介绍
2015/05/21 Python
Python实现图像几何变换
2015/07/06 Python
Python基于正则表达式实现文件内容替换的方法
2017/08/30 Python
Python利用ElementTree模块处理XML的方法详解
2017/08/31 Python
如何利用python制作时间戳转换工具详解
2018/09/12 Python
在python中按照特定顺序访问字典的方法详解
2018/12/14 Python
python3 http提交json参数并获取返回值的方法
2018/12/19 Python
Python实现微信消息防撤回功能的实例代码
2019/04/29 Python
Python 一键获取百度网盘提取码的方法
2019/08/01 Python
Python求平面内点到直线距离的实现
2020/01/19 Python
python根据字典的键来删除元素的方法
2020/08/16 Python
美国波道夫·古德曼百货官网:Bergdorf Goodman
2017/11/07 全球购物
美国购买舞会礼服网站:Couture Candy
2019/12/29 全球购物
Ibatis中如何提高SQL Map的性能
2013/05/11 面试题
可以使用抽象函数重写基类中的虚函数吗
2013/06/02 面试题
Laravel中Kafka的使用详解
2021/03/24 PHP
酒店服务与管理毕业生求职信
2013/11/02 职场文书
物业管理专业自荐信
2014/07/01 职场文书
日语系毕业求职信
2014/07/27 职场文书
2015年助理工程师工作总结
2015/04/03 职场文书
解决SpringCloud Feign传对象参数调用失败的问题
2021/06/23 Java/Android
SSM项目使用拦截器实现登录验证功能
2022/01/22 Java/Android