无法在这个位置找到: head2.htm
当前位置: 建站首页 > 新闻 > 公司新闻 >

微信怎么制作小程序_js完成简略的网页换肤效果

时间:2021-01-12 14:59来源:微信怎么制作小程序 作者:jianzhan 点击:
js完成简易的网页页面焕肤实际效果 文中关键共享了js完成简易的网页页面焕肤实际效果的实例编码。具备一定的参照使用价值,下边跟随网编一起來看看吧管理中心观念:网页页
js实现简单的网页换肤效果       本文主要分享了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});
 }

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

(责任编辑:admin)

织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
无法在这个位置找到: ajaxfeedback.htm
栏目列表
推荐内容


扫描二维码分享到微信

在线咨询
联系电话

400-888-8866