EMLOG学院

为模板添加一键换肤功能

摘要: 应该有博友注意到很多网站都有一键换...

应该有博友注意到很多网站都有一键换肤功能,点击某个超链接就会更换预置的皮肤,真是帅呆了。

鉴于此,小编也给大家带来一个换肤教程,这里的一键换肤主要通过JS来更换预置的CSS达到目的。

步骤一:首先建立JS文件,可以把它封装成一个名为skin.js的文件,然后在header.php中调用它。

//====================换肤效果=====================
/*--函数名:get_cookie
*--功能:读取需要的cookie
*--参数:
c_name:要读取的cookie名
*--返回值:
value:要读取的cookie的值
*--------------------------------*/
function get_cookie(cookie_name){
//alert("get_cookie在执行");
var cookie_pos = document.cookie.indexOf(cookie_name);
// 如果找到了索引,就代表cookie存在,反之,就说明不存在。

if (cookie_pos != -1){

// 把cookie_pos放在值的开始,只要给值加1即可。
cookie_pos += cookie_name.length + 1;
//alert(cookie_pos);
var cookie_end = document.cookie.indexOf(";", cookie_pos);
if (cookie_end == -1){
cookie_end = document.cookie.length;

}
var value = unescape(document.cookie.substring(cookie_pos,cookie_end));
}
//alert(value);
return value;
}
//===================调用=====================
window.onload = function() {
//alert(document.cookie);
var d_css_document="http://blog.chenziwen.com/content/templates/bsmw_cms/css/body5.css";//默认的css文件,比如css/green.css
var cookie = get_cookie("myskin");//传入cookie名,取回cookie名对应的CSS文件名
var css_document=cookie?cookie:d_css_document;//cookie名对应的CSS文件名是否存在,存在则用,不存在则用默认的css

change_css("skin",css_document,"myskin");//修改样式,当然,你要填入你自己的参数
}



/*函数:change_css(css_id,css_document)
*功能:自定义版面色彩样式,并写入cookie,保存
*参数:
css_id:要被替换的css文件在页面中的id
css_document:要使用的css文件的路径
cookie_name:要设置的该样式的cookie名称
*返回值:
无
*--------------------------------*/
function change_css(css_id,css_document,cookie_name){
//alert("change_css执行");
document.getElementById(css_id).setAttribute("href",css_document);

set_cookie(cookie_name,css_document,365);//保存为1年,当然,你也可以把它分离出来,做为参数设置
}
//====================cookie函数====================
/*--函数名:set_cookie
*--功能:设置cookie,只能自定义一个cookie的名和值,设置多个时需要多次调用
*--参数:
c_name:自定义cookie名
c_value:自定义cookie值
可选c_expires:设置该cookie的存活时间,单位:天
可选c_path:设置该cookie的路径
可选c_domain:设置该cookie的域
可选c_secure:设置是否安全cookie,1安全,0或不设置,不安全
*--返回值:
无
*--------------------------------*/
function set_cookie(c_name,c_value,c_expires,c_path,c_domain,c_secure){
var cookie_string=c_name + "=" + escape(c_value);
if(c_expires){
var expires = new Date();
expires.setTime(expires.getTime() + c_expires*24*60*60*1000);
cookie_string+=";expires="+expires;
}
if(c_path){
cookie_string+=";path="+c_path;
}
if(c_domain){
cookie_string+=";domain="+c_domain;
}
if(c_secure){
cookie_string+=";secure";
}
document.cookie=cookie_string;
//alert(document.cookie);
}
以上的JS的作用是在用户访问网站的时候判断用户时候点击换肤按钮,如果没有点击则调用默认的CSS文件,如果点击某个皮肤之后则存入cookie,并在下次访问时调用cookie中的数据。

步骤二:保存好JS后接下来从header.php下手。header.php我们用到两行代码,分别调用模板的CSS与上面的换肤JS

<script type="text/javascript" src="<?php echo TEMPLATE_URL; ?>skin.js"></script>
<link id="skin" media="all" rel="stylesheet" href="<?php echo TEMPLATE_URL; ?>css/body5.css">
步骤三:最后添加换肤按钮,这个按钮可以随意添加在什么地方都可以。以a标签为例:

<a href="#" onclick="change_css('skin','<?php echo TEMPLATE_URL; ?>css/body5.css','myskin');">默认皮肤</a>
<a href="#" onclick="change_css('skin','<?php echo TEMPLATE_URL; ?>css/body1.css','myskin')">蓝天白云</a>
这样当用户点击相应的皮肤时就能达到换肤的效果了,需要注意的是在步骤三中的body5.css与body1.css是你预置的皮肤,可自行更换。

最后为大家提供JS代码以及相应的html代码


评论(0)