首页
关于我们
服务项目
作品展示
服务支持
联系我们
友情链接
网站地图
 您当前位置:网络学院 -> 图像网站系-> 网站建设-> CSS/HTML 教程
动态CSS,换肤技术
作者:admin 来源:网络
日期: 2007-2-27
站内搜索
文章页数:[1] 

常见的例子就是:一个站点上有多个页面样式提供浏览者选择。

同时,在选择了某样式后,再次打开该页面时,将仍然保持该样式。

自然会想到了Cookie技术

下面是HTML代码部分(另外再加需要的CSS文件就可以使用了):

<HTML>
<HEAD>
<link ID="skin" rel="stylesheet" type="text/css">
<TITLE>换肤技术</TITLE>
<SCRIPT LANGUAGE=javascript>
<!--
function SetCookie(name,value){
     var argv=SetCookie.arguments;
     var argc=SetCookie.arguments.length;
     var expires=(2<argc)?argv[2]:null;
     var path=(3<argc)?argv[3]:null;
     var domain=(4<argc)?argv[4]:null;
     var secure=(5<argc)?argv[5]:false;
     document.cookie=name+"="+escape(value)+((expires==null)?"":("; expires="+expires.toGMTString()))+((path==null)?"":("; path="+path))+((domain==null)?"":("; domain="+domain))+((secure==true)?"; secure":"");
}

function GetCookie(Name) {
     var search = Name + "=";
     var returnvalue = "";
     if (document.cookie.length > 0) {
           offset = document.cookie.indexOf(search);
           if (offset != -1) {     
                 offset += search.length;
                 end = document.cookie.indexOf(";", offset);                       
                 if (end == -1)
                       end = document.cookie.length;
                 returnvalue=unescape(document.cookie.substring(offset,end));
           }
     }
     return returnvalue;
}

var thisskin;
thisskin=GetCookie("nowskin");
if(thisskin!="")
     skin.href=thisskin;
else
     skin.href="css.css";

function changecss(url){
     if(url!=""){
           skin.href=url;
           var expdate=new Date();
           expdate.setTime(expdate.getTime()+(24*60*60*1000*30));
           //expdate=null;
                                   //以下设置COOKIES时间为1年,自己随便设置该时间..
           SetCookie("nowskin",url,expdate,"/",null,false);
     }
}
//-->
</SCRIPT>
</HEAD>
<BODY>

<P>请选择下面的下拉菜单测试换肤效果</P>

<a href=# onclick="changecss(‘css.css‘)">css.css</a>
<a href=# onclick="changecss(‘css1.css‘)">css1.css</a>
<a href=# onclick="changecss(‘css2.css‘)">css2.css</a>
<a href=# onclick="changecss(‘css3.css‘)">css3.css</a>
<br>

<select onchange="changecss(this.value)">
<option>选择样式单文件</option>
<script language="javascript">
var csss=new Array();
csss[0]="css.css";
csss[1]="css1.css";
csss[2]="css2.css";
csss[3]="css3.css";
var i;
for(i=0;i<4;i++)
     if(thisskin==csss[i])
           document.write("<option value=\""+csss[i]+"\" selected>"+csss[i]+"样式单文件</option>");
     else
           document.write("<option value=\""+csss[i]+"\">"+csss[i]+"样式单文件</option>");
</script>
</select>
</BODY>
</HTML>

文章页数:[1] 
放大字体显示 缩小字体显示 打印文章 推荐给朋友
热门文章
·网页特效之用css样式表实现首字大写
·web标准常见问题大集合
·如何有效管理好CSS
·使用图片和CSS结合制作动画按钮
·CSS样式表:详细介绍IE7新支持的选择器
·网站设计之合理架构css
·Bad Tags — 有害的标签
·有关HTML代码的另类应用技巧
·XHTML代码的基本应用
·CSS超级技巧大放送合集
最新文章
·认清CSS的类class和标识id选择符
·网站设计之合理架构css
·CSS超级技巧大放送合集
·网页特效之用css样式表实现首字大写
·用CSS样式表来定义博客上的链接样式
·网页制作 谈谈CSS样式表的命名规范
·如何有效管理好CSS
·IE不解释VBSCRIPT的原因和解决办法
·web标准常见问题大集合
·解读absolute与relative
相关主题
版权申明:除部分特别声明不要转载,或者授权本站独家播发的文章外,大家可以自由转载本站的原创文章,但原作者和来自本站的链接必须保留(非本站原创的,按照原来自一节,自行链接)。文章版权归本站和作者共有。
转载要求:转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印,亦不能抹去本站水印。
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有。
发表评论  打印  刷新  推荐给朋友  返回顶部  关闭

网上大名: