首页 > PHP资讯 > HTML5培训技术 > JS实现网页换肤功能效果

JS实现网页换肤功能效果

HTML5培训技术
 
 
  使用 JS 切换对应的 CSS 样式表。例如hao123首页的右上方就有网页换肤功能。除了切换 CSS 样式表文件之外,通常的网页换肤还需要通过 Cookie 来记录用户之前更换过的皮肤,这样下次用户访问的时候,就可以自动使用上次用户配置的选项。
 
  基本流程如下:
 
                             
 
   上面是使用流程图来描述下,自从工作以来很小画这样的流程图 如果流程图画错了或者画的不够好 请大家原谅!
 
   先来看看效果图吧!
 
   
 
  我只是做个demo 来实现这样一个效果!假如页面上一进来的时候 有这么四个按钮 分别代表不同的样式 当我鼠标点击不同的按钮时候 切换不同的css文件 且切换时候记录cookie里面去,当我们刷新页面或者关闭网页 重新打开 由于cookie的存在 所以还是关闭前的css样式 这样就实现了简单的网页换肤功能效果 基本的原理就是这些!
 
 了解cookie及HTML5中sessionStorage和localStorage
  首先我们来了解下cookie是干什么用的?简单讲 cookie作用是客户端存储数据。也就是本地存储。具体的了解可以看我之前的一篇关于cookie的博客。深入了解cookie
 
  讲到cookie,我们再来简单的来了解下HTML5中新增了2个本地存储sessionStorage和localStorage. sessionStorage、 localStorage、cookie都是在 代码
 
 default.css 代码如下:
 
@charset "utf-8";
/* CSS Document */
*{padding:0;margin:0;}
h2{color:#00C;}
p{color:#006;}
orange.css代码如下:
 
@charset "utf-8";
/* CSS Document */
*{padding:0;margin:0;}
h2{color:#C60;}
p{color:#C33;}
green.css代码如下:
 
@charset "utf-8";
/* CSS Document */
*{padding:0;margin:0;}
h2{color:#060;}
p{color:#060;}
red.css代码如下:
 
@charset "utf-8";
/* CSS Document */
*{padding:0;margin:0;}
h2{color:#F00;}
p{color:#F00;}

HTML5培训技术

本文由欣才IT学院整理发布,未经许可,禁止转载。
支持37不支持0