网页计划：页面换肤成果

道理:通过存取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();//绑定按钮变乱

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!