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 相关文章推荐
jquery的ajax从纯真网(cz88.net)获取IP地址对应地区名
Dec 02 Javascript
在JavaScript中typeof的用途介绍
Apr 11 Javascript
jsonp原理及使用
Oct 28 Javascript
js仿百度切换皮肤功能(html+css)
Jul 10 Javascript
JavaScript中函数声明与函数表达式的区别详解
Aug 18 Javascript
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
React进阶学习之组件的解耦之道
Aug 07 Javascript
简单谈谈关于Angular Cli打包的事
Sep 05 Javascript
详解用Node.js写一个简单的命令行工具
Mar 01 Javascript
Layui 设置select下拉框自动选中某项的方法
Aug 14 Javascript
详解KOA2如何手写中间件(装饰器模式)
Oct 11 Javascript
微信 jssdk 签名错误invalid signature的解决方法
Jan 14 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
索尼SONY ICF-7600A(W)电路分析
2021/03/01 无线电
PHP 日常开发小技巧
2009/09/23 PHP
php访问数组最后一个元素的函数end()用法
2015/03/18 PHP
php实现贪吃蛇小游戏
2016/07/26 PHP
浅谈ThinkPHP中initialize和construct的区别
2017/04/01 PHP
JQuery为textarea添加maxlength属性的代码
2010/04/07 Javascript
用jquery与css打造个性化的单选框和复选框
2010/10/20 Javascript
Javascript数组操作函数总结
2015/02/05 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
2015/03/18 Javascript
javascript组合使用构造函数模式和原型模式实例
2015/06/04 Javascript
JavaScript实现的圆形浮动标签云效果实例
2015/08/06 Javascript
underscore之Chaining_动力节点Java学院整理
2017/07/10 Javascript
JS实现快递单打印功能【推荐】
2018/06/21 Javascript
详解JavaScript函数callee、call、apply的区别
2019/03/08 Javascript
js实现小时钟效果
2020/03/25 Javascript
Vue父组件监听子组件生命周期
2020/09/03 Javascript
vue 数据双向绑定的实现方法
2021/03/04 Vue.js
[05:08]顺网杯ISS-DOTA2赛歌 少女偶像Lunar青春演绎
2013/12/05 DOTA
python批量下载图片的三种方法
2013/04/22 Python
Python的Flask框架中web表单的教程
2015/04/20 Python
使用Kivy将python程序打包为apk文件
2017/07/29 Python
django开发post接口简单案例,获取参数值的方法
2018/12/11 Python
python连接PostgreSQL数据库的过程详解
2019/09/18 Python
python语言的优势是什么
2020/06/17 Python
简单总结CSS3中视窗单位Viewport的常见用法
2016/02/04 HTML / CSS
Html5定位终极解决方案
2020/02/05 HTML / CSS
华为慧通笔试题
2016/04/22 面试题
如果有两个类A,B,怎么样才能使A在发生一个事件的时候通知B
2016/03/12 面试题
新学期教师寄语
2014/04/02 职场文书
父母对孩子的寄语
2014/04/09 职场文书
商场开业庆典策划方案
2014/06/02 职场文书
淘宝活动总结范文
2014/06/26 职场文书
驻村工作简报
2015/07/20 职场文书
导游词之重庆钓鱼城
2019/09/19 职场文书
OpenCV-Python模板匹配人眼的实例
2021/06/08 Python
css3应用示例:新增的选择器
2022/03/16 HTML / CSS