4当前位置:网页制作JavaScript教程-网页更换皮肤样式功能浅析
4网页制作分类
CSS | HTML
FrontPage | DreamWeaver
JavaScript | ASP
.Net | PHP
JSP | XML
数据库 | PhotoShop
FireWorks | Flash
视频 | 其它
4赞助商链接
4最新网页制作
·浅谈JavaScript中定义变量时有无var声明的区别
·通过Jquery获取URL参数并转码
·Javascript获取时间间隔的方法
·Javascript获取视频时长
·javascript中双感叹号(!!)作用示例介绍
·javascript:void(0)使用探讨
·JS设置下拉框为只读的方法
·JS转化毫秒为时间格式代码
·Js控制CSS切换样式表实现网页风格切换
·网页更换皮肤样式功能浅析
4热门网页制作
·网页自动适应客户端分辨率的实现
·JS网页加载进度条
·突破IE屏蔽限制弹出新窗口
·三级下拉联动链接菜单
·文本框控制字数和禁止粘贴
·33个JavaScript经典效果
·JS获取页面地址栏参数
·JavaScript去除空格的三种方法
·又一个全国省市双级联动下拉选择框
·全国省市县无刷新多级联动菜单
4相关网页制作
·JavaScript实现图片等比例缩放
·JS让广告不影响网页打开速度
·JS的document和window对象简述
·Javascript中substr()与substring()的区别
·左右选择添加、删除菜单内容
·JS获取页面地址栏参数
·JavaScript窗口及输入输出
·收集整理了一些javascript经典函数
·JS结合Cookies记录IE浏览历史
·JS让广告不影响网页打开速度
网页更换皮肤样式功能浅析
类别:JavaScript教程    来源:网络    时间:2014/2/4    贴士:推荐给好友
收藏本页 8 
  原理:通过存取cookie和dom操作调用不同的样式表文件来实现前台换肤。

  演示:http://www.zzsky.cn/build/downloads/changeskin/index.html

  下载:http://www.zzsky.cn/build/downloads/changeskin/changeskin.rar

  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();//绑定按钮事件
}
·上一篇:滚动到页面底端时自动加载更多信息
·下一篇:Js控制CSS切换样式表实现网页风格切换
本站部分内容收集整理于网络,仅用于学习,不存在商业目的,如有涉及版权等问题请联系站长,本站将在第一时间内进行处理!
Copyright © 2007-2010 Zzsky.Cn  中国站长天空  网站制作维护:可乐猫  QQ:8127544(请注明来意)
设为首页  加入收藏  联系站长  友情链接  闽ICP备12017729号