<!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>
js css 仿QQ网站换肤效果代码
时间： 2024-10-28 14:33:45
js css 仿QQ网站换肤效果代码的相关文章
js实现仿QQ秀换装效果的方法_javascript技巧
本文实例讲述了js实现仿QQ秀换装效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="www.w3.org/1999/xhtml"> <he
JS+CSS实现电子商务网站导航模板效果代码_javascript技巧
本文实例讲述了JS+CSS实现电子商务网站导航模板效果代码.分享给大家供大家参考.具体如下: 这是一款JS+CSS实现的电子商务网站导航模板,二级导航菜单,超强美化,超强实用性,分享给大家. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-dzsw-wen-nav-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN
Android插件化的思考——仿QQ一键换肤,思考比实现更重要！
Android插件化的思考--仿QQ一键换肤,思考比实现更重要! 今天群友希望写一个关于插件的Blog,思来想去,插件也不是很懂,只是用大致的思路看看能不能模拟一个,思路还是比较重要的,如果你有兴趣的话,也可以加群:555974449,你也可以说出你想看的Blog哦,嘿嘿!好的,不多说,我们进入正题: 关于QQ的换肤,他们的实现思路我不是很清楚,但是你可以看一下这张换肤的截图 我们想使用哪个主题就直接下载就好了,这一实现的过程我们大致的可以猜想: 首选是下载到本地指定文件夹,然后通过插件加载到我
JS实现仿QQ面板的手风琴效果折叠菜单代码_javascript技巧
本文实例讲述了JS实现仿QQ面板的手风琴效果折叠菜单代码.分享给大家供大家参考.具体如下: 这是一款简单实用的垂直导航菜单,有人把这种风格称为"手风琴"菜单,类似仿QQ面板的折叠菜单,鼠标放在任意一个菜单上,它会展开所属的二级菜单,很不错的选择,以前就分享过此类菜单,这次经过了代码优化升级,更人性化了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-f-qq-sfq-style-menu-codes/ 具体代码如下: <!
JS+CSS实现简易的滑动门效果代码_javascript技巧
本文实例讲述了JS+CSS实现简易的滑动门效果代码.分享给大家供大家参考.具体如下: 看了很多的滑动门和滑动菜单的资料,总算写出来了一个像样的滑动门,虽然外观不怎么样,但可以兼容火狐,还请老前辈们不要笑话,以后有好多西再请大家批评. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-simple-hdtx-demo-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1
JS+CSS实现的经典tab选项卡效果代码_javascript技巧
本文实例讲述了JS+CSS实现的经典tab选项卡效果代码.分享给大家供大家参考.具体如下: 这是一款经典的JavaScript+CSS tab选项卡代码,由以前的一款改写而成,自认为不错的东西,发上来分享吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-jd-tab-cha-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio
JS+CSS实现精美的二级导航效果代码_javascript技巧
本文实例讲述了JS+CSS实现精美的二级导航效果代码.分享给大家供大家参考.具体如下: 这是一款基于JS+CSS实现的精美二级导航,适合想学一些基础点的.基础js知识技巧的朋友们.其实本菜单的完成不仅仅是需要基础知识,更需要的是对CSS熟悉之后的巧妙构思,菜单可能都会写,但写出好菜单就不那么容易了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-jm-2l-nav-menu-codes/ 具体代码如下: <!DOCTYPE htm
javascript仿QQ网站新闻图片轮换效果
焦点图文字背景广州花都拆违遭遇碎瓶煤气罐 焦点图文字背景一颗"钉子"放弃工作保祖屋5年 焦点图文字背景爸爸,不要把我丢下 焦点图文字背景杨幂最新杂志写真 魅惑优雅 1 2 3 4
js实现仿京东2级菜单效果(带延时功能)_jquery
本文实例讲述了jquery实现仿京东2级菜单效果.分享给大家供大家参考.具体如下: 这里介绍js实现仿京东2级菜单效果代码,带有延时功能,操作上更加舒适自然. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-fjd-style-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: