百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>JS教程> js css 仿QQ网站换肤效果代码
分享文章到:

js css 仿QQ网站换肤效果代码

发布时间:01/15 来源: 浏览: 关键词:
本款js css 仿QQ网站换肤效果代码的实现原理是定义好样式名称,然后点击换肤时,就把样式保存到cookie,这样只要打开网页就去读取cookie如果存在就读取用户设置的css否则就默认的样式了。

<!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>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>js css 仿qq网站换肤效果代码</title>
<script language="网页特效">
//设置cookie,按钮选中状态,页面皮肤   
skin.setskin=function(n){   
var skins =("skin").getelementsbytagname("li");   
for (i=0;i
{   
skins[i].classname="";//初始化按钮状态   
}   
skin.setcookie(n);//保存当前样式   
("skin_"+n).classname="selected";//设置选中皮肤按钮的样式   
("cssfile").href="css/main"+n+".css";//设置页面样式   
}  

//cookie

skin.setcookie=function(n){   
var expires=new date();   
expires.settime(expires.gettime()+24*60*60*365*1000);   
var flag="skin_cookie="+n;   
document.cookie=flag+";expires="+expires.togmtstring();   
}   
//返回用户设置的皮肤样式   
skin.readcookie=function(){   
var skin=0;   
var mycookie=document.cookie;   
var name="skin_cookie";   
var start1=mycookie.indexof(name+"=");   
if(start1==-1){   
skin=0;//如果没有设置则显示默认样式   
}   
else{   
var start=mycookie.indexof("=",start1)+1;   
var end=mycookie.indexof(";",start);   
if(end=-1){   
end=mycookie.length;   
}   
var values= unescape(mycookie.substring(start,end));   
if (values!=null)   
{   
skin=values;   
}   
}   
return skin;   
  
}  

//js换肤事情

skin.addevent=function(){   
var skins =("skin").getelementsbytagname("li");   
for (i=0;i
{   
skins[i].onclick=function(){skin.setskin(this.id.substring(5))};   
}   

//加载效果

window.onload=function(){   
skin.setskin(skin.readcookie());//根据读取cookie返回值设置皮肤样式   
skin.addevent();//绑定按钮事件
</script>
</head>

<body>
<ul id="skin">    
<li id="skin_0" title="灰色">灰色li>  
<li id="skin_1" title="绿色">绿色li>  
<li id="skin_2" title="黄色">黄色li>  
<li id="skin_3" title="蓝色">蓝色li>  
<li id="skin_4" title="粉色">粉色li>  
<li id="skin_5" title="紫色">紫色li>  
<ul>  

</body>
</html>

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有6人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板