jQuery之网页换肤完毕代码,jQuery之网页换肤

下边是代码:
先是HTML页面代码如下:

用jQuery做网页换肤确实是比很多少个很抢眼,很好的抉择,那是自个儿在上学jQuery中学的学识,以为很有用,写了下来,希望大家有越来越好的点子也许代码不足的地点请见谅,本身也是初学者啊,希望大家竞相打气相互学习。闲话少说,放入正题:

用jQuery做网页换肤确实是很贰个很抢眼,很好的选项,那是本身在念书jQuery中学的文化,感到很有用,写了下来,希望大家有越来越好的主意还是代码不足的地点请见谅,本身也是初大方啊,希望大家相互打气相互学习。闲话少说,归入正题:

复制代码 代码如下:

上面是代码:

上面是代码:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
<title>Jacob Song的购物网址</title>
<link rel=”Stylesheet” href=”css/header.css” type=”text/css” />
<link rel=”Stylesheet” href=”css/skin/skin_0.css” type=”text/css”
id=”cssfile” />
</head>
<body>
<script language=”javascript” src=”Scripts/jquery-1.4.1.js”
type=”text/javascript”></script>
<!–引用了八个Cookie插件,您能够下载Cookie插件,也足以用作者的源代码插件,上面有下载的–>
<script language=”javascript” src=”Scripts/jquery.cookie.js”
type=”text/javascript”></script>
<!–这是Scripts文件夹中的大旨代码ChangeSkin.js–>
<script language=”javascript” src=”Scripts/ChangeSkin.js”
type=”text/javascript”></script>
<div id=”header”>
<a id=”logo” href=”#”>笔者的购物网址</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>
</body>
</html>

第一HTML页面代码如下:

首先HTML页面代码如下:

CSS文件,对应HTML

亚洲必赢官网 1亚洲必赢官网 2View Code

亚洲必赢官网 3亚洲必赢官网 4View Code

复制代码 代码如下:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “;
<html xmlns=”;
<head>
    <title>Jacob Song的购物网址</title>
    <link rel=”Stylesheet” href=”css/header.css” type=”text/css” />
    <link rel=”Stylesheet” href=”css/skin/skin_0.css” type=”text/css” id=”cssfile” />
    
</head>
<body>
<script language=”javascript” src=”Scripts/jquery-1.4.1.js” type=”text/javascript”></script>
<!–引用了贰个库克ie插件,您能够下载Cookie插件,也得以用本身的源代码插件,上面有下载的–>
<script language=”javascript” src=”Scripts/jquery.cookie.js” type=”text/javascript”></script>
<!–那是Scripts文件夹中的大旨代码ChangeSkin.js–>
<script language=”javascript” src=”Scripts/ChangeSkin.js” type=”text/javascript”></script>
<div id=”header”>
    <a id=”logo” href=”#”>小编的购物网址</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>
</body>
</html>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “;
<html xmlns=”;
<head>
    <title>Jacob Song的购物网站</title>
    <link rel=”Stylesheet” href=”css/header.css” type=”text/css” />
    <link rel=”Stylesheet” href=”css/skin/skin_0.css” type=”text/css” id=”cssfile” />
    
</head>
<body>
<script language=”javascript” src=”Scripts/jquery-1.4.1.js” type=”text/javascript”></script>
<!–引用了三个Cookie插件,您能够下载Cookie插件,也得以用本身的源代码插件,上边有下载的–>
<script language=”javascript” src=”Scripts/jquery.cookie.js” type=”text/javascript”></script>
<!–那是Scripts文件夹中的主题代码ChangeSkin.js–>
<script language=”javascript” src=”Scripts/ChangeSkin.js” type=”text/javascript”></script>
<div id=”header”>
    <a id=”logo” href=”#”>作者的购物网址</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>
</body>
</html>

/*头顶样式开始*jQuery之网页换肤完毕代码,jQuery之网页换肤。/
#header{
width:800px;
height:80px;
border: 1px solid #AAAAAA;
margin:10px auto;
background:#3B5998;
}
/*logo样式早先*/
#logo {
float:left;
margin:0 0 0 10px;
color:#FFF;
font-size:3em;
font-weight:700;
line-height:80px;
}
/*切换皮肤样式*/
#skin {
float: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(../Imgs/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; }

 

 

接下来你还要有一点点备用的CSS,正是换肤所急需的,当您点击时,它们用的CSS是不一样的,然后选中后,保存在库克ie中,在CSS文件夹下Skin文件夹中有备用的换肤的CSS样式
Skin_0.css文书如下:

CSS文件,对应HTML

CSS文件,对应HTML

复制代码 代码如下:

 

 

#header{
background:#3B5998;
}

/*头顶样式起始*/
#header{
    width:800px; 
    height:80px; 
    border: 1px solid #AAAAAA;
    margin:10px auto; 
    background:#3B5998;
}
/*logo样式伊始*/
#logo { 
    float:left; 
    margin:0 0 0 10px; 
    color:#FFF; 
    font-size:3em; 
    font-weight:700;
    line-height:80px;
}
/*切换皮肤样式*/
#skin { 
    float: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(../Imgs/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; }

/*尾部样式开首*/
#header{
    width:800px; 
    height:80px; 
    border: 1px solid #AAAAAA;
    margin:10px auto; 
    background:#3B5998;
}
/*logo样式开首*/
#logo { 
    float:left; 
    margin:0 0 0 10px; 
    color:#FFF; 
    font-size:3em; 
    font-weight:700;
    line-height:80px;
}
/*切换皮肤样式*/
#skin { 
    float: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(../Imgs/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; }

Skin_1.css文书如下:

 

 

复制代码 代码如下:

接下来你还要有点备用的CSS,正是换肤所急需的,当您点击时,它们用的CSS是区别的,然后选中后,保存在Cookie中,在CSS文件夹下Skin文件夹中有备用的换肤的CSS样式

下一场你还要有一对备用的CSS,正是换肤所急需的,当你点击时,它们用的CSS是例外的,然后选中后,保存在库克ie中,在CSS文件夹下Skin文件夹中有备用的换肤的CSS样式

#header{
background:#BB3BD9;
}

 

 

Skin_2.css文书如下:

 

 

复制代码 代码如下:

Skin_0.css文书如下:

Skin_0.css文件如下:

#header{
background:#E31559;
}

#header{

#header{

Skin_3.css文本如下:

background:#3B5998;

background:#3B5998;

复制代码 代码如下:

}

}

#header{
background:#08BECE;
}

 

 

Skin_4.css文件如下:

Skin_1.css文本如下:

Skin_1.css文书如下:

复制代码 代码如下:

#header{

#header{

#header{
background:#FBA60A;
}

background:#BB3BD9;

background:#BB3BD9;

Skin_5.css文书如下:

}

}

复制代码 代码如下:

 

 

#header{
background:#AFD400;
}

Skin_2.css文本如下:

Skin_2.css文书如下:

实在能够看看轻易的,便是颜色各异,日后基于要求能够拉长更加多的体裁,这里只是一个例子供大家参照他事他说加以考察,
当您完了地点的干活后,就能够运营了,本文只是很轻便的演示换肤的,您能够下载源代码:
点击下载源代码

#header{

#header{

您大概感兴趣的文章:

  • jQuery基于cookie完毕换肤效率实例
  • jQuery达成的网页换肤效果示例
  • jQuery落成轻便的网页换肤效果示例
  • Bootstrap框架结合jQuery仿百度换肤成效实例分析
  • 选拔jQuery达成Web页面换肤功用的要领解析
  • 基于jQuery实现仿百度首页换肤背景图片切换代码
  • jQuery落成给页面换肤的法子
  • 据悉jquery
    ui的alert,confirm方案(援助换肤)
  • jquery
    cookie完毕的简短换肤作用适合小网站
  • JQuery
    网址换肤作用实现代码
  • jQuery结合jQuery.cookie.js插件实现换肤成效示例

background:#E31559;

background:#E31559;

}

}

 

 

Skin_3.css文书如下:

Skin_3.css文件如下:

#header{

#header{

background:#08BECE;

background:#08BECE;

}

}

 

 

Skin_4.css文本如下:

Skin_4.css文书如下:

#header{

#header{

background:#FBA60A;

background:#FBA60A;

}

}

 

 

Skin_5.css文件如下:

Skin_5.css文本如下:

#header{

#header{

background:#AFD400;

background:#AFD400;

}

}

 

 

实则能够看来简单的,便是颜色各异,日后遵照需求能够增进越来越多的样式,这里只是一个例子供我们参谋,

事实上能够看来不难的,就是颜色各异,日后依附供给能够加上越多的体制,这里只是二个例证据与供词大家参谋,

当你做到地点的做事后,就足以运作了,本文只是极粗略的示范换肤的,您能够下载源代码:

亚洲必赢官网,当你完毕地方的职业后,就足以运作了,本文只是异常粗略的自己要作为范例服从规则换肤的,您能够下载源代码:

点击下载源代码

点击下载源代码

 

 

自己是初学者啊,希望我们有更加好的提出请指教!!相互学习!

自家是初学者啊,希望大家有越来越好的建议请指教!!互相学习!

招待大家拍砖

应接大家拍砖

 

 

网站地图xml地图