现在介绍网页换肤
的例子已经数不胜数,自己也没有仔细研究过,刚搞遇到类似这个问题,网上查了资料解决了问题,感觉很有用,就记录了下来和大家分享一下。效果很简单,我就直接讲怎么使用的。
其中用到了jquery
.cookie.js
首先是html代码:
XML/HTML代码
-
<
div
id
=
"header_demo"
>
-
<
a
id
=
"logo"
href
=
"#"
>
Rainweb
</
a
>
-
<
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
>
CSS代码:
CSS代码
-
-
#header
_demo{
-
width
:
700px
;
-
height
:
80px
;
-
border
:
1px
solid
#AAAAAA
;
-
margin
:
10px
auto
;
-
-
}
-
-
#logo
{
-
float
:
left
;
-
margin
:0 0 0
10px
;
-
color
:
#FFF
;
-
font-size
:3em;
-
font-weight
:700;
-
line-height
:
80px
;
-
}
-
-
#skin
{
-
float
:
right
right
;
-
margin
:
10px
;
-
padding
:
4px
;
-
width
:
120px
;
-
list-style
:
none
;
-
border
:
1px
solid
#CCCCCC
;
-
background
:
#FFF
;
-
}
-
#skin
li {
-
float
:
left
;
-
margin-right
:
4px
;
-
width
:
15px
;
-
height
:
15px
;
-
text-indent
:-
9999px
;
-
overflow
:
hidden
;
-
display
:
block
;
-
cursor
:
pointer
;
-
background-image
:
url
(images/theme.gif);
-
}
-
#skin
_0 {
background-position
:
0px
0px
; }
-
#skin
_1 {
background-position
:
15px
0px
; }
-
#skin
_2 {
background-position
:
35px
0px
; }
-
#skin
_3 {
background-position
:
55px
0px
; }
-
#skin
_4 {
background-position
:
75px
0px
; }
-
#skin
_5 {
background-position
:
95px
0px
; }
-
#skin
_0.selected {
background-position
:
0px
15px
; }
-
#skin
_1.selected {
background-position
:
15px
15px
; }
-
#skin
_2.selected {
background-position
:
35px
15px
; }
-
#skin
_3.selected {
background-position
:
55px
15px
; }
-
#skin
_4.selected {
background-position
:
75px
15px
; }
-
#skin
_5.selected {
background-position
:
95px
15px
; }
javascript代码:
JavaScript代码
-
-
$(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"
)
-
.siblings().removeClass("selected"
);
-
$("#cssfile"
).attr(
"href"
,
"css/skin/"
+ skinName +
".css"
);
-
$.cookie("MyCssSkin"
, skinName, { path:
'/'
, expires: 10 });
-
alert(skinName);
-
}
最后就是一个link文件:
XML/HTML代码
-
<
link
id
=
"cssfile"
type
=
"text/css"
href
=
"css/skin/skin_5.css"
rel
=
"Stylesheet"
>
演示地址:http://www.wufangbo.com/demo/jquery/05/index.html
下载地址:http://www.wufangbo.com/demo/jquery/05/05.rar
转载至(http://www.wufangbo.com/jquery-page-peels)
分享到:
相关推荐
NULL 博文链接:https://meng-xsm-163-com.iteye.com/blog/1114602
jquery网页换肤
现在介绍网页换肤的例子已经数不胜数,自己也没有仔细研究过,刚搞遇到类似这个问题,网上查了资料解决了问题,感觉很有用,就记录了下来和大家分享一下。效果很简单,我就直接讲怎么使用的。 其中用到了jquery....
武方博-开发的源代码 JQuery网页换肤_前端开发-武方博,可换皮肤有蓝色、紫色、红色、天蓝色、橙色、淡绿色
通过jquery实现网页换肤 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <title>Jacob Song的购物网站 ...
通过jQuery控制控件属性的办法实现网页一键换肤,压缩包包括了jQuery,CSS。
jQuery实现换肤效果jQuery实现换肤效果jQuery实现换肤效果jQuery实现换肤效果
记得以前腾讯网页上有个根据用户心情自定义换皮肤颜色,感觉这个用户体验蛮好的,给出几套样式,由用户自己选择渲染的样式.对腾讯的前端开发们很是赞叹.话说现在腾讯不知道咋的,去掉这个功能了,没事现在jquery博客给...
jquery四色网页换肤代码
jquery四色网页换肤代码
js特效脚本含源码和说明jquery四色网页换肤代码本资源系百度网盘分享地址
主要介绍了jQuery实现的网页换肤效果,结合完整实例形式分析了jQuery通过修改link标签的href属性值实现换肤效果的相关技巧,需要的朋友可以参考下
一个简单的网页换肤示例,采用jQuery
主要介绍了jQuery实现简单的网页换肤效果,涉及jQuery事件响应及页面元素属性动态变换操作技巧,需要的朋友可以参考下
jQuery 完成的网页(换肤)风格适时切换 jQuery 完成的网页(换肤)风格适时切换
jQuery无刷新换肤,实时切换四种网页背景代码,适时切换四种网页背景颜色。选择网页右上角的四个彩色小按钮,单击一下,网页会将背景色变换为小按钮的颜色,并标记按钮。...希望通过本特效让你实现网页换肤。
有兴趣刚需的可以自己下载,非常实用的特效代码,可以完美运行,有能力的还可以二次修改!
用js以及jQuery实现的网页换肤功能,有选择存储功能,替换标签和样式即可