js实现简单的网页换肤效果


Posted in Javascript onJanuary 18, 2017

js实现简单的网页换肤效果

中心思想:网页换肤的原理就是通过调用不同的样式表文件来实现不同的皮肤切换,并且需要将换好的皮肤计入Cookie中,这样用户已下次访问时,就可以显示用户自定义皮肤了

步骤:

1.在设计HTML代码时,用了一些小技巧,就是将皮肤选择按钮<li>元素的id与网页皮肤的样式文件名称设置的相同。这样就可以使完成换肤操作简化很多。

2.HTML结构要有一个带id的样式表链接,通过操作该链接的herf属性的值,从而实现换肤

<link rel="stylesheet" href="css/skin_0.css" id="cssfile"/>

3. 根据当前的li的id,通过attr()方法为<link>元素的href属性设置不同的值代码如下:

var $li = $("#skin li");
   $li.click(function () {
    $("#"+this.id).addClass("selected")
     .siblings().removeClass("selected");
    $("#cssfile").attr("href","css/"+this.id+".css");
   });

4. 当单机皮肤选择按键时候就可以切开皮肤了。但是当用户刷新网页或者关闭浏览起后,皮肤会被初始化,因此需要将当前选择的皮肤进行保存(jQuery中有一款Cookie插件),它简化了Cookie的操作。

//将皮肤保存进cookie
 $.cookie("myCssSkin",this.id,{path:'/',expires:10});

 保存后,就可以通过Cookie来获取当前的皮肤了,如果Cookie确实存在,则将当前设置为Cookie记录的值:

//获取Cookie中的皮肤
   var cookie_skin = $.cookie("myCssSkin");
   //判断皮肤存不存在
   if (cookie_skin){
    switchSkin(cookie_skin);
   }
   //设置cookid中的皮肤
   function switchSkin(skinName) {
    $("#"+skinName).addClass("selected")
     .siblings().removeClass("selected");
    $("#cssfile").attr("href","css/"+skinName+".css");
    $.cookie("myCssSkin",skinName,{path:'/',expires:10});
   }

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
JS控件autocomplete 0.11演示及下载 1月5日已更新
Jan 09 Javascript
JavaScript中的关联数组问题
Mar 04 Javascript
javascript实现超炫的向上滑行菜单实例
Aug 03 Javascript
jquery简单实现网页层的展开与收缩效果
Aug 07 Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
Jan 22 Javascript
浅析javascript异步执行函数导致的变量变化问题解决思路
May 13 Javascript
Node.js 8 中的 util.promisify的详解
Jun 12 Javascript
Vue绑定内联样式问题
Oct 17 Javascript
vue 中 beforeRouteEnter 死循环的问题
Apr 23 Javascript
8个有意思的JavaScript面试题
Jul 30 Javascript
js中位数不足自动补位扩展padLeft、padRight实现代码
Apr 06 Javascript
详解Vue Cli浏览器兼容性实践
Jun 08 Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
Jan 18 #Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
Jan 18 #Javascript
jQuery Masonry瀑布流插件使用方法详解
Jan 18 #Javascript
js实现消息滚动效果
Jan 18 #Javascript
利用Vue.js实现checkbox的全选反选效果
Jan 18 #Javascript
微信小程序的动画效果详解
Jan 18 #Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
Jan 18 #Javascript
You might like
php的正则处理函数总结分析
2008/06/20 PHP
PHP实现的MD5结合RSA签名算法实例
2017/10/07 PHP
php 判断IP为有效IP地址的方法
2018/01/28 PHP
php数组指针函数功能及用法示例
2020/02/11 PHP
javascript中利用数组实现的循环队列代码
2010/01/24 Javascript
js 自定义的联动下拉框
2010/02/07 Javascript
jquery动画2.元素坐标动画效果(创建一个图片走廊)
2012/08/24 Javascript
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误
2013/01/11 Javascript
判断ie的两种简单方法
2013/08/12 Javascript
jQuery插件实现适用于移动端的地址选择器
2016/02/18 Javascript
Vue.2.0.5过渡效果使用技巧
2017/03/16 Javascript
详解angularjs获取元素以及angular.element()用法
2017/07/25 Javascript
vue.js引入外部CSS样式和外部JS文件的方法
2019/01/06 Javascript
JavaScript的级联函数用法简单示例【链式调用】
2019/03/26 Javascript
js原生map实现的方法总结
2020/01/19 Javascript
[01:03]悬念揭晓 11月26日DOTA2完美盛典不见不散
2017/11/23 DOTA
[37:45]完美世界DOTA2联赛PWL S3 LBZS vs Phoenix 第二场 12.09
2020/12/11 DOTA
Python的装饰器用法学习笔记
2016/06/24 Python
Python中文件I/O高效操作处理的技巧分享
2017/02/04 Python
python 垃圾收集机制的实例详解
2017/08/20 Python
python中virtualenvwrapper安装与使用
2018/05/20 Python
scikit-learn线性回归,多元回归,多项式回归的实现
2019/08/29 Python
python判断无向图环是否存在的示例
2019/11/22 Python
numpy np.newaxis 的实用分享
2019/11/30 Python
完美解决pycharm导入自己写的py文件爆红问题
2020/02/12 Python
Selenium及python实现滚动操作多种方法
2020/07/21 Python
python使用ctypes库调用DLL动态链接库
2020/10/22 Python
详解Django自定义图片和文件上传路径(upload_to)的2种方式
2020/12/01 Python
基于注解实现 SpringBoot 接口防刷的方法
2021/03/02 Python
提供世界各地便宜的机票:Sky-tours
2016/07/21 全球购物
速卖通欧盟:Aliexpress EU
2020/08/19 全球购物
2015年大学辅导员工作总结
2015/05/12 职场文书
2015年社区居委会工作总结
2015/05/18 职场文书
地心历险记观后感
2015/06/15 职场文书
Python socket如何解析HTTP请求内容
2022/02/12 Python
MySQL 原理与优化之Limit 查询优化
2022/08/14 MySQL