JS CSS实现网页换肤功能实例教程
现在网站换皮肤是比较常见的功能,大多数论坛都有的,要想实现这样效果可以看如下代码:Html代码部分:
1.要有一个带id的样式表链接,我们要通过操作这个链接来调用不同的href.
<link href="css/main0.css" rel="stylesheet" type="text/css" id="cssfile" />
2.皮肤选择按钮(后台为每个li添加onclick事件,触发换肤功能)
<ul id="skin"> <li id="skin_0">灰色</li> <li id="skin_1">绿色</li> <li id="skin_2">黄色</li> <li id="skin_3">蓝色</li> <li id="skin_4">粉色</li> <li id="skin_5">紫色</li> </ul>
JavaScript控制部分:
1.换肤方法:
//设置cookie、初始化按钮选中状态 skin.setSkin=function(n){ var skins =("skin").getElementsByTagName("li"); for (i=0;i<skins.length;i++) { skins[i].className="";//初始化按钮状态 } skin.setCookie(n);//保存当前样式 ("skin_"+n).className="selected";//设置选中皮肤按钮的样式 ("cssfile").href="css/main"+n+".css";//设置页面样式 }
2.存取cookie:
//将当前皮肤n存到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; }
3.绑定换肤按钮事件:
skin.addEvent=function(){ var skins =("skin").getElementsByTagName("li"); for (i=0;i<skins.length;i++) { skins[i].onclick=function(){skin.setSkin(this.id.substring(5))}; } }
4.页面加载完成后设置皮肤样式:
window.onload=function(){ skin.setSkin(skin.readCookie());//根据读取的cookie返回值设置皮肤样式 skin.addEvent();//绑定按钮事件
一、推荐使用迅雷或快车等多线程下载软件下载本站资源。
二、未登录会员无法下载,登录后可获得更多便利功能,若未注册,请先注册。
三、如果服务器暂不能下载请稍后重试!总是不能下载,请点我报错 ,谢谢合作!
四、本站大部分资源是网上搜集或私下交流学习之用,任何涉及商业盈利目的均不得使用,否则产生的一切后果将由您自己承担!本站将不对任何资源负法律责任.如果您发现本站有部分资源侵害了您的权益,请速与我们联系,我们将尽快处理.
五、如有其他问题,请加网站设计交流群(点击这里查看交流群 )进行交流。
六、如需转载本站资源,请注明转载来自并附带链接
七、本站部分资源为加密压缩文件,统一解压密码为:www.aizhanzhe.com
大家评论
站长推荐
点击排行
- 1CSS控制文字在Div最底部显示
- 2Thinkphp5如何配置IP+端口访问项目模块
- 3elementUI el-dialog弹框居中
- 4教你如何搭建及优化站点
- 5国内互联网视频行业运营分析
- 6service mysql start出错,mysql不能启动,解决mysql: unrecognized service错误
- 7CSS实现悬浮顶部的Div工具栏
- 8记一次Thinkphp5.1框架mysql数据库崩溃(SQLSTATE [08004] Too many connections)
- 9连接SQL Server数据库提示:Login failed for user 'sa'错误的解决方案
- 10Thinkphp3.2在centos7上设置计划任务的方法