就下载 —— 安全下载、无毒手机软件、绿色软件官方下载网站最近更新|下载排行|热门标签|收藏本站

您现在的位置是:就下载 > IT资讯 > 软件教程 > 网页设计:页面换肤功能

网页设计:页面换肤功能

时间:2014-10-31 15:52:43 来源: 复制分享

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

 

换肤示例下载:sour.rar

 

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

上一篇:Ubuntu Tweak新版引入桌面恢复功能

本文地址:软件教程 >> http://www.9xz.net/it/ruanjianjiaocheng/32543.html

下一篇:教你一招 用DOS命令行来守护秘密

  • 打印
推荐阅读
热门专题
推荐内容
热点内容