首先当然需要美工的支持了,对于同样的html,引用的img,及css需要做n套实现(n等于需要的皮肤数量)
1.在需要换肤的时候,根据事件触发js,根据颜色不同给用户的某个cookie置上一个值.比如下面这样,给一个name=css的cookie注入不同的值,代表选择了不同
<a href="#" onclick="change('css','blue')">样式1</a><br>
<a href="#" onclick="change('css','green')">样式2</a><br>
<a href="#" onclick="change('css','purple')">样式3</a><br>
function change(name,value) ...{
var expires = new Date("June 3, 2010");
var path="/";
var domain;
var secure;
setCookie(name, value, expires, path, domain, secure);
//document.cookie= name + "=" +value;
}
2.再用程序读cookie,将cookie对应的不同路径写到session中,如下代码会把选择的皮肤放到一个session变量里面,这样在所有页面上均可以通过${cssDir}来取这个值
//根据cookie加载页面样式
Cookie[] cookies = request.getCookies();
if (cookies != null) ...{
for(Cookie c : cookies) ...{
if(c.getName().equals("css")) ...{
session.put("cssDir", c.getValue());
}
}
}else ...{
session.put("cssDir","blue"); //默认蓝色皮肤
}
3,html中引用的css及img路径使用同样的变量,就会解析得到不同皮肤的样式。比如我把css的目录做成如下的:
那么在页面上通过
<link rel="stylesheet" type="text/css" href="css/webMail/${cssDir}/css.css">
由于${cssDir}/是动态替换的,因此上面3个目录下的css根据不同皮肤就会应用到。
分享到:
相关推荐
利用JS实现网页换皮肤效果 利用JS实现网页换皮肤效果 利用JS实现网页换皮肤效果
介绍: 原理:利用JS调用不同CSS,来实现网页风格的变化。
本文实例讲述了JQuery给网页更换皮肤的方法。分享给大家供大家参考。具体分析如下: 为了更好的提升用户体验,很多网页都有换肤的功能,那么这是怎么实现的那,其实,换肤只不过是在对应的位置改了Css样式罢了!! ...
使用js + html 实现的简单的网页计算器,可以实现加、减、乘、除复杂运算,二进制、八进制、十六进制转换、sin、cos、tan三角函数运算、acos、atan、asin反三角函数运算、开平方、log、随机数生成、指数运算、四舍五...
课程大作业基于html+css的贪吃蛇皮肤网页设计源码含效果截图.zip课程大作业基于html+css的贪吃蛇皮肤网页设计源码含效果截图.zip课程大作业基于html+css的贪吃蛇皮肤网页设计源码含效果截图.zip课程大作业基于...
记得以前腾讯网页上有个根据用户心情自定义换皮肤颜色,感觉这个用户体验蛮好的,给出几套样式,由用户自己选择渲染的样式.对腾讯的前端开发们很是赞叹.话说现在腾讯不知道咋的,去掉这个功能了,没事现在jquery博客给...
课程作业基于html+css的贪吃蛇皮肤网页设计源码+效果展示.zip课程作业基于html+css的贪吃蛇皮肤网页设计源码+效果展示.zip课程作业基于html+css的贪吃蛇皮肤网页设计源码+效果展示.zip课程作业基于html+css的贪吃蛇...
网页更换皮肤。。大家下下来看看效果
支持的音频视频格式主要有MP3,FLV,MP4,并可以通过网页JS接口实现WMP(Windows Media Player)所支持的格式播放,如wma等。主要功能特色有列表式播放(自定义音乐专辑和列表),MP3可视化效果(声音频谱),同步歌词(默认...
实现网页的皮肤更换 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <!-- saved from url=(0036)...
这段js代码通过每天在不同时段自动更换网页调用的样式表,实现更换皮肤的功能。 [removed] <!-- function getStylesheet() { var currentTime = new Date().getHours(); if (0 <= currentTime&¤tTime...
C#图片编辑处理 展示,皮肤类似网页的winform程序
你可以把它用到ASP.NET,AJAX,Java等等所有网页上,支持的功能有:可以改变窗口大小、支持最小化、最大化窗口、模型对话框、渐入渐出的渐变效果,支持皮肤等等功能。现有的实例包括:模仿MAC OS的对话框,在对话框...
支持的音频视频格式主要有MP3,FLV,MP4,并可以通过网页JS接口实现WMP(Windows Media Player)所支持的格式播放,如wma等。主要功能特色有列表式播放(自定义音乐专辑和列表),MP3可视化效果(声音频谱),同步歌词(默认...
1.在设计HTML代码时,用了一些小技巧,就是将皮肤选择按钮元素的id与网页皮肤的样式文件名称设置的相同。这样就可以使完成换肤操作简化很多。 2.HTML结构要有一个带id的样式表链接,通过操作该链接的herf属性的值,...
利用JavaScript实现无刷新切换网页的CSS文件,以达到无刷新切换风格的目的,也就是大家俗说的“换肤”特效原理当然是利用JS在客户端执行的特性重载不同的CSS文件,来实现网页风格的变化,CSS文件需要WEB开发者事先...
【适用于大学期末网页课程设计或网页设计比赛等】 【操作方便、界面简单大方:完全控件式的页面布局,对于新手来说简单明了,可以快速的了解到你所想要了解的内容。里面包含了官方推荐、赛事热点、英雄介绍、精彩短...