下载之家:专注下载8年,极速安全,用心打造!

下载之家首页 |最新软件 |软件排行 |软件专题

您当前所在位置: 下载之家 >  资讯 >  PC软件资讯 >  操作系统 >  网页设计:页面换肤功能

网页设计:页面换肤功能

时间:2011/04/06 03:17:42来源:本站整理作者:佚名

原理:通过存取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";//设置页面样式


}

[page_break]

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

更多0

相关阅读 升级win10后发现C盘爆满应该如何解决?解决win10C盘爆满方法 微软推送Win10 Build 14942 更新内容一览 win10商店购买应用提示“请稍后重试”解决方法 Win10升级失败出现错误代码0xC0000001怎么办? Win10新版Build 14931发布 Skype直接收发短信和彩信 Linux kernel 4.8正式版下周上线 最后一个候选版发布 Win10升级完成后怎样删除旧系统文件? 微软win10装机量不尽如人意:仅五分之一用户升级