`
haimav
  • 浏览: 53796 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
社区版块
存档分类
最新评论

Javascript+css 实现网页换肤功能

    博客分类:
  • html
阅读更多

 

Html代码部分:

1.要有一个带id的样式表链接,我们要通过操作这个链接来调用不同的href.

<link href="css/main0.css" rel="stylesheet" type="text/css" id="cssfile" />

2.皮肤选择按钮(后台为每个li添加onclick事件,触发换肤功能)

<ul id="skin">
<li id="skin_0" title="灰色">灰色</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>

Js部分:

1.换肤方法

//设置cookie,按钮选中状态,页面皮肤
skin.setSkin=function(n){
var skins =("skin").getElementsByTagName("li");
for (i=0;i<skins.length;i++)
{
skins[i].className="";//初始化按钮状态
}
skin.setCookie(n);//保存当前样式
("skin_"+n).className="selected";//设置选中皮肤按钮的样式
("cssfile").href="css/main"+n+".css";//设置页面样式
}

2.存取cookie

//将当前皮肤n存到cookie
skin.setCookie=function(n){
var expires=new Date();
expires.setTime(expires.getTime()+24*60*60*365*1000);
var flag="Skin_Cookie="+n;
document.cookie=flag+";expires="+expires.toGMTString();
}
//返回用户设置的皮肤样式
skin.readCookie=function(){
var skin=0;
var mycookie=document.cookie;
var name="Skin_Cookie";
var start1=mycookie.indexOf(name+"=");
if(start1==-1){
skin=0;//如果没有设置则显示默认样式
}
else{
var start=mycookie.indexOf("=",start1)+1;
var end=mycookie.indexOf(";",start);
if(end=-1){
end=mycookie.length;
}
var values= unescape(mycookie.substring(start,end));
if (values!=null)
{
skin=values;
}
}
return skin;

}

3.绑定换肤按钮事件

skin.addEvent=function(){
var skins =("skin").getElementsByTagName("li");
for (i=0;i<skins.length;i++)
{
skins[i].onclick=function(){skin.setSkin(this.id.substring(5))};
}
}

4.页面加载完成后设置皮肤样式

window.onload=function(){
skin.setSkin(skin.readCookie());//根据读取cookie返回值设置皮肤样式
skin.addEvent();//绑定按钮事件

分享到:
评论

相关推荐

    css+js实现网站换肤

    css+js实现网站换肤 思路:通过用户选择的风格,通过JS函数,启用或取消特定CSS的引用。

    js+css简单实现网页换肤效果

    主要介绍了js+css简单实现网页换肤效果的方法,涉及JavaScript响应鼠标事件动态遍历及修改页面元素样式的相关技巧,需要的朋友可以参考下

    网页换肤(DIV+CSS)

    实现网页的皮肤更换 &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"&gt; &lt;!-- saved from url=(0036)...

    Javascript结合css实现网页换肤功能

    皮肤选择按钮(后台为每个li添加onclick事件,触发换肤功能) ”skin”&gt; ”skin_0″ title=”灰色”&gt;灰色&lt;/li&gt; ”skin_1″ title=”绿色”&gt;绿色&lt;/li&gt; ”skin_2″ title=”黄色”&gt;黄色&lt;/li&gt; &lt;li id=”skin_3″ tit

    基于CSS JAVAScript的网页换肤特效的设计与实现.pdf

    基于CSS JAVAScript的网页换肤特效的设计与实现.pdf

    javascript菜单和css换肤

    javascript菜单和css换肤

    javascript实现动态CSS换肤技术的脚本.docx

    javascript实现动态CSS换肤技术的脚本.docx

    cookie,dom,css,js实现页面换肤

    页面换肤已经成为web2.0的时尚,看似简单的过程,实现起来却不那么容易,因为它涉及到javascript写入和读取cookie,这篇文章详细介绍了通过存取cookie和dom操作调用不同的样式表文件来实现前台换肤功能 Html代码部分...

    css+js.rar_cssclie_javascript

    css+javascript实现客户端表现层的换肤! css +javascript实现客户端表现层的换肤!

    css javascript 换肤技术

    通过javascript的cookie和css技术,实现用户更改网站整体风格的示例

    JQuery&CSS;&CSS;+DIV实例大全.rar

    1.JS+CSS仿腾讯QQ首页搜索框无刷新换肤效果代码 2.js+css简单后台二级树形菜单demo示例 3.JS+CSS美化经典Select选项框插件 4.JS+CSS通用一个页面同时三个焦点图轮换效果完整实例 5.JS+CSS网页版模拟QQ登录...

    基于html+css+div+JavaScript的360导航源码

    注:强烈建议Web基础不扎实的同学请重头到尾把项目代码敲一遍. 源码简介: [360导航]完整源码,2015版闪亮登场,纯净绿色 v5.0 ...360安全网址是360旗下的网址导航,以其...五、支持天气预报,支持邮箱登陆,支持官方换肤。

    javascript实现动态CSS换肤技术的脚本

    javascript实现动态CSS换肤技术的脚本

    基于ASP.NET+SQL Server 实现的BBS 论坛系统【100013073】

    页面使用了Html+Javascript+ASP.Net作为B/S模式下的前台开发工具,C#作为B/S模式下的后台编码语言,ASP.NET作为B端的数据访问技术,SQL SERVER 2012作为后台的数据库,页面的加载、效果作为div+css作为网页布局。...

    JavaScript实现换肤功能

    js换肤功能的实现原理非常简单,就是使用js切换对应的css样式表文件,本文重点给大家介绍JavaScript实现换肤功能,感兴趣的朋友参考下吧

    jquery网页换肤

    通过jquery实现网页换肤 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;title&gt;Jacob Song的购物网站 ...

    JavaScript实现无刷新切换网页的CSS文件.rar

    利用JavaScript实现无刷新切换网页的CSS文件,以达到无刷新切换风格的目的,也就是大家俗说的“换肤”特效原理当然是利用JS在客户端执行的特性重载不同的CSS文件,来实现网页风格的变化,CSS文件需要WEB开发者事先...

Global site tag (gtag.js) - Google Analytics