龙盟编程博客 | 无障碍搜索 | 云盘搜索神器
快速搜索
主页 > web编程 > div+css/html >

使用JS+css实现网页皮肤切换(页面换肤)功能实例

时间:2009-12-21 11:47来源:未知 作者:admin 点击:
分享到:
下面是HTML+JS实例,实现页面的切换皮肤功能,不过本站没有实践过,是转载于博客园作者的文章,看得不错,所以分享下。 前端HTML页面代码: Code [http://www.xueit.com] ! DOCTYPE html PUBLIC

下面是HTML+JS实例,实现页面的切换皮肤功能,不过本站没有实践过,是转载于博客园作者的文章,看得不错,所以分享下。

前端HTML页面代码:

Code [http://www.xueit.com]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>website Replacement Skin</title> <meta http-equiv="Content-Type" content="text/html; charset=uft-8" /> <link rel="alternate stylesheet" href="skin/blue.css" type="text/css" media="screen" title="blue" /> <link rel="alternate stylesheet" href="skin/green.css" type="text/css" media="screen" title="green" /> <link rel="alternate stylesheet" href="skin/orange.css" type="text/css" media="screen" title="orange" /> <link rel="alternate stylesheet" href="skin/beige.css" type="text/css" media="screen" title="beige" /> <script type="text/javascript" src="js/skin.js"></script> </head> <body> <div > <span class="color blu"><a href="#" onclick="setBackgroundColor('blue');return false;" title="blue"></a></span> <span class="color verde"><a href="#" onclick="setBackgroundColor('green');return false;" title="green"></a></span> <span class="color arancio"><a href="#" onclick="setBackgroundColor('orange');return false;" title="orange"></a></span> <span class="color beige"><a href="#" onclick="setBackgroundColor('beige');return false;" title="beige"></a></span> </div> … … </body> </html>

看到有skin/blue.css、skin/green.css、skin/orange.css、skin/beige.css四种皮肤CSS样式,下面是JS实现切换代码。

SKIN.js代码:

Code [http://www.xueit.com]
var defaultBackgroundColor = "beige"; var currentBackgroundColor; function setBackgroundColor(color) { var i, a; for(i=0; (a = document.getElementsByTagName("link")[i]); i ) { if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) { a.disabled = true; if(a.getAttribute("title") == color) a.disabled = false; } } currentBackgroundColor = color; } function createCookie(name,value,days) { if (days) { var date = new Date(); date.setTime(date.getTime() (days*24*60*60*1000)); var expires = "; expires=" date.toGMTString(); } else expires = ""; document.cookie = name "=" value expires "; path=/"; } function readCookie(name) { var nameEQ = name "="; var ca = document.cookie.split(';'); for(var i=0;i < ca.length;i ) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); } return null; } window.onunload = function(e) { createCookie("backgroundColor", currentBackgroundColor, 365); } var cookie = readCookie("backgroundColor"); var bgColor = cookie ? cookie : defaultBackgroundColor; setBackgroundColor(bgColor);

就这么简单就实现了,你不妨可以试一下。

精彩图集

赞助商链接