页面换肤功能浅析

转载 2013年12月05日 15:48:48

原理:通过存取cookie和dom操作调用不同的样式表文件来实现前台换肤.

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();//绑定按钮事件
 
}


 

 

 

转载地址:http://bbs.blueidea.com/thread-2860926-1-1.html

JavaScript+CSS实现网页换肤功能

Html代码部分 1.要有一个带id的样式表链接,我们要通过操作这个链接来调用不同的href。 <link href="css/main0.css" rel="stylesheet" type="...
  • zhubin215130
  • zhubin215130
  • 2013年05月14日 16:56
  • 2500

仿造百度换肤功能的实现

换肤功能的应用很广,不管是搜索界面还是普通的管理界面等等,都可以进行设计并且应用换肤功能,起到更好的用户体验。 今天仿造百度的换肤功能,实现了基本的换肤功能,接下来将会为大家介绍如何实现。在设计界...
  • u010297791
  • u010297791
  • 2016年09月14日 09:17
  • 1636

html页面换肤的简单实例

利用iQuery实现简单的页面换肤
  • u010914447
  • u010914447
  • 2014年04月30日 08:49
  • 1868

Android一键换肤功能:一种简单的实现

 Android一键换肤功能:一种简单的实现 现在的APP开发,通常会提供APP的换肤功能,网上流传的换肤代码和实现手段过于复杂,这里有一个开源实现,我找了一大堆,发现这个项目相对较为简洁:h...
  • zhangphil
  • zhangphil
  • 2016年05月19日 17:03
  • 3704

网页换肤(简洁写法[提供思路])

网站更换皮肤样式,可以通过动态改变网页引入的css样式文件来实现。根据这个思路,此功能就变得简单: css引入方式为(外部样式)://skin_0.css文件内容 【默认样式】#skin li{ ...
  • zhumengstyle
  • zhumengstyle
  • 2017年08月02日 15:08
  • 204

iOS App主题皮肤切换功能简介和具体实现详解 附有源码

1. 主题皮肤功能切换介绍 主题切换就是根据用户设置不同的主题,来动态改变用户的界面,通常会改变 navigationBar背景图片、 tabBar背景图片、 tabBar中的按钮的图片和选中的背景图...
  • vbirdbest
  • vbirdbest
  • 2016年01月28日 15:35
  • 6625

JS网页换肤读取cookie基础案例

JS网页换肤读取cookie基础案例
  • qq_20266611
  • qq_20266611
  • 2016年09月02日 11:28
  • 147

js利用cookie实现网页的换肤

在浏览网页的时候,我们经常可以看到部分页面上具有换肤功能,点击改变皮肤且但我们下次浏览的时候,还会是我们选择的皮肤。作为菜鸟来说,这是一种赤裸裸的诱惑……今天查了相关资料,很粗糙的写了一个利用cool...
  • u014703834
  • u014703834
  • 2014年07月31日 16:32
  • 1378

Android换肤功能实现与换肤框架QSkinLoader使用方式介绍

框架地址:https://github.com/qqliu10u/QSkinLoader 效果图 如果想要看框架使用,请直接看第三部分。一、综述此框架脱胎于项目需要实现夜间模式的需求,在上一篇文章...
  • u013478336
  • u013478336
  • 2016年11月08日 15:48
  • 6072

安卓一键换肤的详解

现在市面上众多阅读类App都提供了两种主题:白天or夜间。  上述两幅图片,正是两款App的夜间模式效果,所以,依据这个功能,来看看切换主题到底是怎么实现的(当然现在github有好...
  • u013378580
  • u013378580
  • 2016年10月21日 10:33
  • 666
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:页面换肤功能浅析
举报原因:
原因补充:

(最多只允许输入30个字)