网上找到的一个jquery版网页换肤特效
这个跟我之前在锋利的JQuery那本书里看到的那个一模一样。
<!DOCTYPE html>
<html>
<head>
<meta name="" content="" charset="utf-8"/>
<title>jquery实现页面皮肤切换并保存-柯乐义</title><base target="_blank" />
<link href="http://keleyi.com/keleyi/phtml/jqtexiao/25/css/default.css" rel="stylesheet" type="text/css" />
<link href="http://keleyi.com/keleyi/phtml/jqtexiao/25/css/skin_0.css" rel="stylesheet" type="text/css" id="cssfile" />
<!-- 引入jQuery -->
<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.11.1.min.js"></script>
<!-- 引入jQuery的cookie插件 -->
<script src="http://keleyi.com/keleyi/phtml/jqtexiao/25/js/jquery.cookie.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(function(){
var $li =$("#skin li");
$li.click(function(){
switchSkin( this.id );
});
var cookie_skin = $.cookie( "MyCssSkin");
if (cookie_skin) {
switchSkin( cookie_skin );
}
});
function switchSkin(skinName){
$("#"+skinName).addClass("selected") //当前<li>元素选中
.siblings().removeClass("selected"); //去掉其它同辈<li>元素的选中
$("#cssfile").attr("href", "http://keleyi.com/keleyi/phtml/jqtexiao/25/css/" + skinName + ".css"); //设置不同皮肤
$.cookie( "MyCssSkin" , skinName , { path: '/', expires: 10 });
}
//]]>
</script>
</head>
<body>
<div><h2>jQuery皮肤无刷新切换并保存</h2>
<div>请点击下面的各种演示的小方框设定以下内容的皮肤,当关闭页面后再开，以下内容还是设定的颜色。因为保存到cookie，所以一段时间后打开页面，仍然为最后设置的眼色。
<br /><a href="http://keleyi.com/keleyi/phtml/jqtexiao/25.htm" style="color:blue;text-decoration:none;">新开在线体验窗口</a></div></div>
<ul id="skin">
<li id="skin_0" title="灰色" class="selected">灰色</li>
<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>
<div id="div_side_0">
<div id="news">
<h1 class="title"><a href="http://keleyi.com/menu/jquery/">jQuery</a></h1>
</div>
</div>
<div id="div_side_1">
<div id="game">
<h1 class="title"><a href="http://keleyi.com/a/bjad/ifjrn3s1.htm">原文</a></h1>
</div>
</div>
</body>
</html>
网上找到的一个jquery版网页换肤特效的更多相关文章
- JS实现网页换肤功能效果
网页换肤的基本原理 使用 JS 切换对应的 CSS 样式表.例如hao123首页的右上方就有网页换肤功能.除了切换 CSS 样式表文件之外,通常的网页换肤还需要通过 Cookie 来记录用户之前更换过 ...
- js网页换肤
使网页背景颜色可选黄/粉 <html> <head> <meta charset="utf-8"> <meta name="ge ...
- JavaScript网页换肤
使网页背景颜色可选黄/粉 <!doctype html> <html> <head><title>网页换肤</title></head ...
- 网页换肤,模块换肤,jQuery的Cookie插件使用（转）
具体效果如下: 第一次加载如下图: 然后点击天蓝色按钮换成天蓝色皮肤如下图: 然后关闭网页重新打开或者在打开另一个网页如下图: 因为皮肤用Cookie保存了下来,所以不会重置 具体的实现代码如下: & ...
- 【转】Javascript+css 实现网页换肤功能
来源:http://www.php100.com/html/webkaifa/DIV_CSS/2008/1014/2326.html Html代码部分: 1.要有一个带id的样式表链接,我们要通过操作 ...
- 基于js的网页换肤（不需要刷新整个页面，只需替换css文件）
1. [代码][JS]代码 <HTML><HEAD><link ID="skin" rel="stylesheet" typ ...
- jquery网页换肤+jquery的cookie+动态调用css样式文件,可以的
比较具有参考性,代码全贴(当然,还需要一张图片需要的留个邮箱,看到就发) 贴在这儿吧,修改一下css的引用位置应该可以用 <%@ page language="java" c ...
- 网页换肤：原生js与jq
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- stylish——一键为网页换肤，改变字体大小，去除广告
今天给大家介绍的是一款非常好用的插件stylishstylish是一款可以为网站自定义主题的插件 可以在chrome的应用商店找到也可以通过网址访问https://userstyles.org/ 应用 ...
随机推荐
- LED应用照明产品常识关键点
一.基本关注点 1. 寿命LIFE(影响灯具寿命主要因素:热管理.工作温度.工作电压.电源.LED结温) 2. 色彩COLOR(新的LED材料以及改进的生产工艺使得高亮度LED可以生产覆盖整个可见 ...
- TortoiseSVN status cache占用CPU高
进程占用CPU高 每次从SVN上更新资源时,电脑都会卡死,直到资源更新完.当要Commit资源时,SVN也会卡死资源管理器,如下图所示: 解决占用CPU高的问题 1.禁用图标缓存 2.排除路径和包含路 ...
- XBOX ONE游戏开发之登陆服务器（一）
XBOX ONE游戏开发之登陆服务器(一) XBOX LIVE是微软自已的认证服务器, 当我们开发游戏时,如果是联网游戏,需要自已架设单点登陆(SSO)服务器 这个需要微软提供Relying Part ...
- 为什么xcode7请求不成功
1.现在有的工程因为升级xcode7不能进行请求数据,新特性要求App内访问的网络必须使用HTTPS协议.但是现在公司的项目使用的是HTTP协议,使用私有加密方式保证数据安全.现在也不能马上改成HTT ...
- NPM 如何升级？
- Android fragment之间消息传递
1. 在Fragment里定义一个内部接口, 在Fragment初始化方法里, 把父Activity转换成这个接口, 赋值给成员变量 public class DummyFragment extend ...
- 32位计时器极端情况下产生的bug
用每毫秒更新的32位变量用来计时, 使用这个变量计算离上次操作是否间隔10秒.两种写法: f - lastF <10, 和 f
- 条件注释判断浏览器版本<!--[if lt IE 9]>
<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--><!--[if IE]> 所有的IE可识别 <![e ...
- centos6 pyotp bug修复
yum install python-pip -ypip install pyotp vim /usr/lib/python2.6/site-packages/pyotp/utils.py... 49 ...
- JDK动态代理和CGLib动态代理简单演示
JDK1.3之后,Java提供了动态代理的技术,允许开发者在运行期间创建接口的代理实例. 一.首先我们进行JDK动态代理的演示. 现在我们有一个简单的业务接口Saying,如下: package te ...