使用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 相关文章推荐
如何实现iframe(嵌入式帧)的自适应高度
Jul 26 Javascript
浅谈jquery.fn.extend与jquery.extend区别
Jul 13 Javascript
jQuery实现的经典滑动门效果
Sep 22 Javascript
BootStrap Table 分页后重新搜索问题的解决办法
Aug 08 Javascript
微信小程序 swiper制作tab切换实现附源码
Jan 21 Javascript
js实现仿购物车加减效果
Mar 01 Javascript
AngularJS 异步解决实现方法
Jun 12 Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
Jun 19 Javascript
vue组件学习教程
Sep 09 Javascript
Vue Element使用icon图标教程详解(第三方)
Feb 07 Javascript
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
Sep 04 Javascript
100行代码实现vue表单校验功能(小白自编)
Nov 19 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中记录用户访问过的产品,在cookie记录产品id,id取得产品信息
2011/05/04 PHP
php多文件上传实现代码
2014/02/20 PHP
PHP实现更新中间关联表数据的两种方法
2014/09/01 PHP
php实现按天数、星期、月份查询的搜索框
2016/05/02 PHP
详谈php静态方法及普通方法的区别
2016/10/04 PHP
PHP+mysql实现从数据库获取下拉树功能示例
2017/01/06 PHP
yii 2.0中表单小部件的使用方法示例
2017/05/23 PHP
javascript 防止刷新,后退,关闭
2010/08/07 Javascript
jquery中map函数与each函数的区别实例介绍
2014/06/23 Javascript
JavaScript中的对象的extensible属性介绍
2014/12/30 Javascript
Vue.js每天必学之计算属性computed与$watch
2016/09/05 Javascript
Jquery中attr与prop的区别详解
2017/05/27 jQuery
es6+angular1.X+webpack 实现按路由功能打包项目的示例
2017/08/16 Javascript
jQuery实现网页拼图游戏
2020/04/22 jQuery
vuex存值与取值的实例
2019/11/06 Javascript
node使用mysql获取数据库数据中文乱码问题的解决
2019/12/02 Javascript
[01:07:57]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第二场 1月19日
2021/03/11 DOTA
python异步任务队列示例
2014/04/01 Python
HTML中使用python屏蔽一些基本功能的方法
2017/07/07 Python
python表格存取的方法
2018/03/07 Python
Python基于pyCUDA实现GPU加速并行计算功能入门教程
2018/06/19 Python
pyqt5 键盘监听按下enter 就登陆的实例
2019/06/25 Python
windows上安装python3教程以及环境变量配置详解
2019/07/18 Python
python requests模拟登陆github的实现方法
2019/12/26 Python
python绘图pyecharts+pandas的使用详解
2020/12/13 Python
html5中canvas学习笔记2-判断浏览器是否支持canvas
2013/01/06 HTML / CSS
普通PHP程序员笔试题
2016/01/01 面试题
北承题目(C++)
2012/05/16 面试题
管理科学大学生求职信
2013/11/13 职场文书
动物科学专业毕业生的自我评价
2013/11/29 职场文书
简单而又朴实的个人求职信分享
2013/12/12 职场文书
《小猪家的桃花树》教学反思
2014/04/11 职场文书
2014基层党员批评与自我批评范文
2014/09/24 职场文书
小学教师师德师风自我评价
2015/03/04 职场文书
2016年秋季运动会加油稿
2015/12/21 职场文书
Python爬虫:从m3u8文件里提取小视频的正确操作
2021/05/14 Python