网页常见的换肤技术

简介:   常见的例子就是:一个站点上有多个页面样式提供浏览者选择。 同时,在选择了某样式后,再次打开该页面时,将仍然保持该样式。 自然会想到了Cookie技术 下面是HTML代码部分(另外再加需要的CSS文件就可以使用了): //       // ...



  常见的例子就是:一个站点上有多个页面样式提供浏览者选择。 
同时,在选择了某样式后,再次打开该页面时,将仍然保持该样式。 
自然会想到了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=(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=# >css.css</a> 
//        
//        <a href=# >css1.css</a> 
//        
//        <a href=# >css2.css</a> 
//        
//        <a href=# >css3.css</a> 
//        
//        <br> 
//        
//        <select > 
//        
//        <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>

目录
相关文章
|
前端开发 容器
如何用纯 CSS 创作一个苹果系统的相册图标
效果预览 在线演示 按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。 https://codepen.io/comehope/pen/zJKwbO 可交互视频 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
1500 0
|
存储 前端开发 JavaScript
《前端实战总结》之使用纯css实现网站换肤和焦点图切换动画
今天我们来继续复盘一些工作中常用的css技巧和知识,以便我们可以更加优雅的用css实现富有动感的网站.
271 0
|
缓存 前端开发 JavaScript
换肤 - 一文看破常用的网站主题切换方式
现在大部分主流网站都不约而同的添加了暗色主题,让我们一起看看这些常用的切换方案、实现方式以及注意点。
非常漂亮的纯css3实现多彩侧边导航(非常流畅),附效果演示
非常漂亮的纯css3实现多彩侧边导航(非常流畅),附效果演示
实现百度换肤功能
具体功能: 点击图片浏览器背景变为所点的图片
|
Web App开发 JavaScript UED
10款非常有效的帮助你设计超酷响应式布局的jQuery插件
如 果你关注最近几年的web设计,那么响应式布局(responsive layout)设计对于你来说肯定不是一个陌生的词汇。 相对于传统的页面设计来说,今天的设计者需要考虑的用户来源和用户体验对于设计者来说是一个非常大的挑战,因为随着硬件的更新,新设备的出现,你需要能够 使得你的网站能够针对不同的设置做出最好显示响应。
799 0
|
JavaScript 索引 Serverless
jquery插件图片浏览
jquery插件图片浏览 jquery代码部分 (function($){ $.fn.mPicsList = function(options){ var picsImgs = $(this).
764 0
|
前端开发 JavaScript
Javascript知识【案例:网站换肤&案例:图片放大】
Javascript知识【案例:网站换肤&案例:图片放大】
|
XML 前端开发 数据格式
那些酷炫的网页你也可以做到——第七篇(初识“CSS“)
那些酷炫的网页你也可以做到——第七篇(初识“CSS“)
173 0
那些酷炫的网页你也可以做到——第七篇(初识“CSS“)

热门文章

最新文章