网页的换肤的原理很简单,可以通过js对dom的操作动态的更换div的样式实现更换肤色的效果,甚至将整个页面的布局焕然一新,这里只队针对做简单的实例,更多的功能,可以按照模式去扩展,jquery的使用是非常简单和灵活的,当然深入的jquery插件的编写需要对性能的考虑当然需要我们对于编程思想的把握,这里只用jquery在前端页面的用户体验上做简单的扩展:
本文章为原创文章,转载请注明出处:
http://www.cnblogs.com/rafx/
准备工作:
images(用于存放必要的图片)
css文件夹(用于存放必要的css)
jquery1.3.1.js库可以从jquery的官方网站获得:
http://jquery.com/
HTML structure:
<!
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"
>
< html >
< head >
< title > New Document </ title >
< meta name ="Generator" content ="EditPlus" >
< meta name ="Author" content ="" >
< meta name ="Keywords" content ="" >
< meta name ="Description" content ="" >
< link href ="css/skin_0.css" rel ="stylesheet" type ="text/css" id ="cssfile" />
< script type ="text/javascript" src ="js/jquery-1.3.1.js" ></ script >
< script type ="text/javascript" >
$(document).ready( function (){ // 等文档加载完毕执行脚本
var $li = $( " #skin li " );
$li.click( function (){
$( " # " + this .id).addClass( " selected " ) // 当前的<li>元素被选中
.siblings().removeClass( " selected " ); // 去掉其他同辈元素<li>元素的选中
alert( ' nihao ' );
$( " #cssfile " ).attr( " href " , " css/ " + this .id + " .css " ); // 设置不同皮肤
$.cookie( " MyCssSkin " , this .id,{path: ' / ' ,expires: 10 }); // 计入cookie
})
});
</ script >
</ head >
< body >
< ul id ="skin" >
< li id ="skin_0" title ="轻度近视" class ="selected" > 轻度近视 </ li >
< li id ="skin_1" title ="中度近视" > 中度近视 </ li >
< li id ="skin_2" title ="严重近视" > 严重近视 </ li >
</ ul >
< div id ="div_side_0" >
< div id ="news" >
< h1 class ="title" > 时事新闻 </ h1 >
</ div >
</ div >
</ body >
</ html >
< html >
< head >
< title > New Document </ title >
< meta name ="Generator" content ="EditPlus" >
< meta name ="Author" content ="" >
< meta name ="Keywords" content ="" >
< meta name ="Description" content ="" >
< link href ="css/skin_0.css" rel ="stylesheet" type ="text/css" id ="cssfile" />
< script type ="text/javascript" src ="js/jquery-1.3.1.js" ></ script >
< script type ="text/javascript" >
$(document).ready( function (){ // 等文档加载完毕执行脚本
var $li = $( " #skin li " );
$li.click( function (){
$( " # " + this .id).addClass( " selected " ) // 当前的<li>元素被选中
.siblings().removeClass( " selected " ); // 去掉其他同辈元素<li>元素的选中
alert( ' nihao ' );
$( " #cssfile " ).attr( " href " , " css/ " + this .id + " .css " ); // 设置不同皮肤
$.cookie( " MyCssSkin " , this .id,{path: ' / ' ,expires: 10 }); // 计入cookie
})
});
</ script >
</ head >
< body >
< ul id ="skin" >
< li id ="skin_0" title ="轻度近视" class ="selected" > 轻度近视 </ li >
< li id ="skin_1" title ="中度近视" > 中度近视 </ li >
< li id ="skin_2" title ="严重近视" > 严重近视 </ li >
</ ul >
< div id ="div_side_0" >
< div id ="news" >
< h1 class ="title" > 时事新闻 </ h1 >
</ div >
</ div >
</ body >
</ html >
CSS code:
skin_0.css
.left
{
float : left ;
}
body {
width : 1024px ;
}
ul li {
width : 70px ;
height : 20px ;
float : left ;
}
#skin {
width : 1024px ;
}
#skin_0 {
background-color : blue ;
}
#skin_1 {
background-color : red ;
}
#skin_2 {
background-color : green ;
}
#div_side_0 {
width : 1024px ;
float : left ;
background-image : url(../images/rf_bg.jpg) ;
font-size : 13px ;
font-color : blue ;
}
.selected {
width : 200px ;
}
float : left ;
}
body {
width : 1024px ;
}
ul li {
width : 70px ;
height : 20px ;
float : left ;
}
#skin {
width : 1024px ;
}
#skin_0 {
background-color : blue ;
}
#skin_1 {
background-color : red ;
}
#skin_2 {
background-color : green ;
}
#div_side_0 {
width : 1024px ;
float : left ;
background-image : url(../images/rf_bg.jpg) ;
font-size : 13px ;
font-color : blue ;
}
.selected {
width : 200px ;
}
skin_1.css
.left
{
float : left ;
}
body {
width : 1024px ;
}
ul li {
width : 70px ;
height : 20px ;
float : left ;
}
#skin {
width : 1024px ;
}
#skin_0 {
background-color : green ;
}
#skin_1 {
background-color : blue ;
}
#skin_2 {
background-color : red ;
}
#div_side_0 {
width : 1024px ;
float : left ;
background-image : url(../images/rf_background.jpg) ;
font-size : 23px ;
font-color : red ;
}
.selected {
width : 200px ;
}
float : left ;
}
body {
width : 1024px ;
}
ul li {
width : 70px ;
height : 20px ;
float : left ;
}
#skin {
width : 1024px ;
}
#skin_0 {
background-color : green ;
}
#skin_1 {
background-color : blue ;
}
#skin_2 {
background-color : red ;
}
#div_side_0 {
width : 1024px ;
float : left ;
background-image : url(../images/rf_background.jpg) ;
font-size : 23px ;
font-color : red ;
}
.selected {
width : 200px ;
}
skin_2.css
.left
{
float : left ;
}
body {
width : 1024px ;
}
ul li {
width : 70px ;
height : 20px ;
float : left ;
}
#skin {
width : 1024px ;
}
#skin_0 {
background-color : green ;
}
#skin_1 {
background-color : blue ;
}
#skin_2 {
background-color : red ;
}
#div_side_0 {
width : 1024px ;
float : left ;
background-image : url(../images/rf_background1.jpg) ;
font-size : 33px ;
font-color : green ;
}
.selected {
width : 200px ;
}
float : left ;
}
body {
width : 1024px ;
}
ul li {
width : 70px ;
height : 20px ;
float : left ;
}
#skin {
width : 1024px ;
}
#skin_0 {
background-color : green ;
}
#skin_1 {
background-color : blue ;
}
#skin_2 {
background-color : red ;
}
#div_side_0 {
width : 1024px ;
float : left ;
background-image : url(../images/rf_background1.jpg) ;
font-size : 33px ;
font-color : green ;
}
.selected {
width : 200px ;
}
这里只针对jquery的dom操作选择性的写了几个样式,用户可以按照自己的需求对换肤效果进行美化。
以上只是一个模板的换肤效果,仅供参考!