网上找到的一个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/ 应用 ...
随机推荐
- linux 通过scp 复制备份恢复mysql数据表
最近客户有个需求,小弟对于运维的东西也是半瓶醋,所以就果断的摸索了下.折磨了一个晚上终于算是搞定了.因为是两个不同的服务器,本来想用ftp,无奈小弟不是很熟悉,所以就用了scp,但是scp有个问题就是 ...
- nodejs——网络编程模块
net模块提供了一个异步网络包装器,用于TCP网络编程,它包含了创建服务器和客户端的方法.dgram模块用于UDP网络编程. 参考链接:https://nodejs.org/api/net.html, ...
- 我是如何来做网站优化(Seo)的？（一）
谈及网站优化(Seo)及搜索引擎优化,很多站长朋友都觉得发发外联就可以了,至少有一部分人是这样认为的. 这里唐建鹏博客将系统的从零开始学习网站优化(Seo),来解析如何从头包装我们的网络门户. 什么是 ...
- 洛谷P1538迎春舞会之数字舞蹈
题目背景 HNSDFZ的同学们为了庆祝春节,准备排练一场舞会. 题目描述 在越来越讲究合作的时代,人们注意的更多的不是个人物的舞姿,而是集体的排列. 为了配合每年的倒计时,同学们决定排出——“数字舞蹈 ...
- Gvr SDK for Unity 分析(一)
Gvr SDK概述 通过谷歌VR SDK for unity 为Android和iOS 构建虚拟现实应用程序 unity SDK在Android上支持构建应用程序for daydream 和 card ...
- UIPanelResetHelper(UIScrollView滚动复位)
原理 如果我们的UI中有滑动列表,并且列表比较长,那么不知道你们是否有这样需求,每次页面打开时,列表的滑动状态都恢复到默认状态. 如果要复位,其实就是修改UIPanel 的属性到初始状态.此组件做的工 ...
- Unity官网教程之Tips
前言 翻译整理unity官网教程的tips部分,原文:http://unity3d.com/cn/learn/tutorials/topics/tips Snap 按住Ctrl键,并用鼠标拖动Game ...
- webSocket ws协议测试
最近公司做了个直播的项目,需要用到Websocket进行通信,因而需要对socket最大连接数及稳定性进行测试.当初得到这一需求的时候,唯一想到的就是jmeter,从百度下载相应的socket依赖ja ...
- java 27 - 3 反射之 通过反射获取构造方法并使用
类 Constructor<T>:提供关于类的单个构造方法的信息以及对它的访问权限. 通过反射的方法获取构造方法并使用 ps:先忽略泛型 A.1:获取构造方法的数组: public Co ...
- java 22 - 14 JDK1.5以后的Lock锁
在之前解决线程安全的过程中,虽然我们可以理解同步代码块和同步方法的锁对象问题, 但是我们并没有直接看到在哪里加上了锁,在哪里释放了锁, 为了更清晰的表达如何加锁和释放锁,JDK5以后提供了一个新的锁对 ...