脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js 网页换肤

js实现简单的网页换肤效果

 更新时间：2017年01月18日 16:19:43   作者：单先生  
本文主要分享了js实现简单的网页换肤效果的示例代码。具有一定的参考价值，下面跟着小编一起来看下吧

中心思想：网页换肤的原理就是通过调用不同的样式表文件来实现不同的皮肤切换，并且需要将换好的皮肤计入Cookie中，这样用户已下次访问时，就可以显示用户自定义皮肤了

步骤：

1.在设计HTML代码时，用了一些小技巧，就是将皮肤选择按钮<li>元素的id与网页皮肤的样式文件名称设置的相同。这样就可以使完成换肤操作简化很多。

2.HTML结构要有一个带id的样式表链接，通过操作该链接的herf属性的值，从而实现换肤

<link rel="stylesheet" href="css/skin_0.css" id="cssfile"/>

3. 根据当前的li的id，通过attr（）方法为<link>元素的href属性设置不同的值代码如下：

var $li = $("#skin li");
   $li.click(function () {
    $("#"+this.id).addClass("selected")
     .siblings().removeClass("selected");
    $("#cssfile").attr("href","css/"+this.id+".css");
   });

4. 当单机皮肤选择按键时候就可以切开皮肤了。但是当用户刷新网页或者关闭浏览起后，皮肤会被初始化，因此需要将当前选择的皮肤进行保存（jQuery中有一款Cookie插件），它简化了Cookie的操作。

//将皮肤保存进cookie
 $.cookie("myCssSkin",this.id,{path:'/',expires:10});

 保存后，就可以通过Cookie来获取当前的皮肤了，如果Cookie确实存在，则将当前设置为Cookie记录的值：

 //获取Cookie中的皮肤
   var cookie_skin = $.cookie("myCssSkin");
   //判断皮肤存不存在
   if (cookie_skin){
    switchSkin(cookie_skin);
   }
   //设置cookid中的皮肤
   function switchSkin(skinName) {
    $("#"+skinName).addClass("selected")
     .siblings().removeClass("selected");
    $("#cssfile").attr("href","css/"+skinName+".css");
    $.cookie("myCssSkin",skinName,{path:'/',expires:10});
   }

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • JS实现刷新父页面不弹出提示框的方法

    JS实现刷新父页面不弹出提示框的方法

    这篇文章主要介绍了JS实现刷新父页面不弹出提示框的方法,实例分析了javascript子窗口的打开以及子窗口与父窗口的交互操作技巧,需要的朋友可以参考下
    2016-06-06
  • 纯JS实现五子棋游戏

    纯JS实现五子棋游戏

    这篇文章主要为大家详细介绍了纯JS实现五子棋游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-05-05
  • js前端传json后台接收‘‘被转为quot的问题解决

    js前端传json后台接收‘‘被转为quot的问题解决

    这篇文章主要介绍了js前端传json后台接收‘‘被转为&quot;的问题解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • JavaScript setInterval()与setTimeout()计时器

    JavaScript setInterval()与setTimeout()计时器

    这篇文章主要介绍了JavaScript setInterval()与setTimeout()计时器，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • 原生JavaScript实现滚动条效果

    原生JavaScript实现滚动条效果

    这篇文章主要介绍了原生JavaScript实现滚动条效果的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-01-01
  • 使用微信小程序开发弹出框应用实例详解

    使用微信小程序开发弹出框应用实例详解

    本文通过实例代码给大家介绍了使用微信小程序开发弹出框功能,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
    2018-10-10
  • 客户端 使用XML DOM加载json数据的方法

    客户端 使用XML DOM加载json数据的方法

    我们取出数据后可以以json的形式传到前端处理，也可以以Xml Dom的形式传到前端进行处理。下边例子是利用Jquery处理XML Dom的例子。
    2010-09-09
  • JS获取经纬度并根据经纬度得到城市信息简单示例

    JS获取经纬度并根据经纬度得到城市信息简单示例

    前端时间刚好使用了百度地图的js api定位获取用户当前经纬度并获取当前详细位置的功能,为了方便下次找起来方便一些自己在这里记录一下,这篇文章主要给大家介绍了关于JS获取经纬度并根据经纬度得到城市信息的相关资料,需要的朋友可以参考下
    2023-11-11
  • JS中toFixed()方法引起的问题如何解决

    JS中toFixed()方法引起的问题如何解决

    最近发现JS当中toFixed()方法存在一些问题，采用原生的Number对象的原型对象上的toFixed()方法时，规则并不是所谓的“四舍五入”或者是四舍六入五成双
    2012-11-11
  • JS实现的3D拖拽翻页效果代码

    JS实现的3D拖拽翻页效果代码

    这篇文章主要介绍了JS实现的3D拖拽翻页效果,通过鼠标事件结合时间函数动态操作页面元素实现拖拽翻页的效果,需要的朋友可以参考下
    2015-10-10

最新评论