网页换肤原理:通过调用不同的样式表文件来实现不同的皮肤,并且将切换好的皮肤计入cookie。

例子:通过点击上边的颜色设置下边显示的背景色。

html代码:

<!-- head部分引入的css样式,需要有个id属性,方便修改 -->
<link href="css/skin_0.css" rel="stylesheet" type="text/css" id="cssfile" />    <ul id="skin">
<li id="skin_0" title="灰色" class="selected">灰色</li> <!-- 此处设置的id名称正好是需要引入的css文件名,方便操作 -->
<li id="skin_1" title="紫色">紫色</li>
<li id="skin_2" title="红色">红色</li>
<li id="skin_3" title="天蓝色">天蓝色</li>
<li id="skin_4" title="橙色">橙色</li>
<li id="skin_5" title="淡绿色">淡绿色</li>
</ul>

js代码:

    <script src="../scripts/jquery-1.8.3.js" type="text/javascript"></script>
<script src="js/jquery.cookie.js" type="text/javascript"></script> //引入jQuery.cookie.js插件
<script type="text/javascript"> $(function(){
var $li =$("#skin li");
$li.click(function(){
switchSkin( this.id ); //this.id获取当前元素的id属性
});
var cookie_skin = $.cookie( "MyCssSkin"); //获取存入浏览器的cookie,如果cookie存在,则切换成cookie保存的val
if (cookie_skin) {
switchSkin( cookie_skin );
}
});
  
    /* 切换背景色的函数 */
function switchSkin(skinName){
$("#"+skinName).addClass("selected") //当前<li>元素选中
.siblings().removeClass("selected"); //去掉其它同辈<li>元素的选中
$("#cssfile").attr("href","css/"+ skinName +".css"); //设置不同皮肤
$.cookie( "MyCssSkin" , skinName , { path: '/', expires: 10 });
} </script>

锋利的jQuery-5--网页换肤的更多相关文章

  1. 网上找到的一个jquery版网页换肤特效

    这个跟我之前在锋利的JQuery那本书里看到的那个一模一样. <!DOCTYPE html> <html> <head> <meta name="& ...

  2. js网页换肤

    使网页背景颜色可选黄/粉 <html> <head> <meta charset="utf-8"> <meta name="ge ...

  3. JS实现网页换肤功能效果

    网页换肤的基本原理 使用 JS 切换对应的 CSS 样式表.例如hao123首页的右上方就有网页换肤功能.除了切换 CSS 样式表文件之外,通常的网页换肤还需要通过 Cookie 来记录用户之前更换过 ...

  4. JavaScript网页换肤

    使网页背景颜色可选黄/粉 <!doctype html> <html> <head><title>网页换肤</title></head ...

  5. 网页换肤,模块换肤,jQuery的Cookie插件使用(转)

    具体效果如下: 第一次加载如下图: 然后点击天蓝色按钮换成天蓝色皮肤如下图: 然后关闭网页重新打开或者在打开另一个网页如下图: 因为皮肤用Cookie保存了下来,所以不会重置 具体的实现代码如下: & ...

  6. 【转】Javascript+css 实现网页换肤功能

    来源:http://www.php100.com/html/webkaifa/DIV_CSS/2008/1014/2326.html Html代码部分: 1.要有一个带id的样式表链接,我们要通过操作 ...

  7. 基于js的网页换肤(不需要刷新整个页面,只需替换css文件)

    1. [代码][JS]代码    <HTML><HEAD><link ID="skin" rel="stylesheet" typ ...

  8. jquery网页换肤+jquery的cookie+动态调用css样式文件,可以的

    比较具有参考性,代码全贴(当然,还需要一张图片需要的留个邮箱,看到就发) 贴在这儿吧,修改一下css的引用位置应该可以用 <%@ page language="java" c ...

  9. 网页换肤:原生js与jq

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. stylish——一键为网页换肤,改变字体大小,去除广告

    今天给大家介绍的是一款非常好用的插件stylishstylish是一款可以为网站自定义主题的插件 可以在chrome的应用商店找到也可以通过网址访问https://userstyles.org/ 应用 ...

随机推荐

  1. C语言 百炼成钢19

    /* 题目55: 有一个字符串符合以下特征(”abcdef,acccd,eeee,aaaa,e3eeeee,sssss,";),要求写一个函数(接口),输出以下结果 1) 以逗号分割字符串, ...

  2. ASP.NET中进行消息处理(MSMQ) 一

    MSMQ是微软消息队列的英文缩写.那么什么是消息队列?这些介绍网上一大片这里就不多说了.本文对于大虾级的人物来说这只是小玩意而已,对于初学者来说这文章还是有一定的帮助,希望路过的大虾们别笑话我班门弄斧 ...

  3. LeetCode 笔记27 Two Sum III - Data structure design

    Design and implement a TwoSum class. It should support the following operations: add and find. add - ...

  4. eclipse的一些初始化设置

    eclipse下载地址:http://www.eclipse.org/ 添加java注释模板 codetemplates.xml:Window->Preferences->Java-> ...

  5. Java四种引用包括强引用,软引用,弱引用,虚引用。

    Java四种引用包括强引用,软引用,弱引用,虚引用. 强引用: 只要引用存在,垃圾回收器永远不会回收Object obj = new Object();//可直接通过obj取得对应的对象 如obj.e ...

  6. rem详解及使用方法

    好像有一段时间没有写博客了……今天刚好总结一下rem的使用方法 首先,先说一个常识,浏览器的默认字体高都是16px.步入正题-----〉 兼容性: 目前,IE9+,Firefox.Chrome.Saf ...

  7. 6.HBase In Action 第一章-HBase简介(1.2 HBase的使用场景和成功案例)

    Sometimes the best way to understand a software product is to look at how it's used. The kinds of pr ...

  8. WP小游戏产品海外发行经验小结

    在群里和大家聊天的时候,大家最多抱怨的就是国内WP份额低,辛辛苦苦做的APP变现困难.我和大家一样,兼职做一些开发,不过我的APP主要面向的是海外市场,从5月份上线到现在不到两个月的时间,没有花费一分 ...

  9. checkbox radio select绑定

    index11.html <html><head> <title>checkbox radio select绑定</title> <script ...

  10. Bootstrap系列 -- 29. 按钮组

    单个按钮在Web页面中的运用有时候并不能满足我们的业务需求,常常会看到将多个按钮组合在一起使用,比如富文本编辑器里的一组小图标按钮等 按钮组和下拉菜单组件一样,需要依赖于button.js插件才能正常 ...