jQuery实现网站换肤
------------写在前面--------------
第一次写微博,不知道怎么才可以更好的表述自己的观点。毕竟新人,被关注的比较少,所以,也当做自己学习过程的笔记吧。
------------正文来啦--------------
所用知识点:
1、jQuery
2、本地缓存(localStorage)
3、两套不同风格的css
实现方法:
我们就用最简单的配置,实现原理就好。
一个页面,页面上有一个切换按钮,我们定义其ID为changeSkin。
<!DOCTYPE html>
<html>
<head><title>jQuery实现换肤</title><link id="Skin" rel="stylesheet" href="red.css"><meta charset="utf-8">
</head>
<body><button id='changeSkin'>点击切换皮肤</button><script src='jquery.js'></script>
<script>具体代码在下文具体介绍</script>
</body>
</html>
红色皮肤css:
body{
background-color:red;
}
蓝色皮肤css:
body{
background-color:blue;
}
下面就是JQuery的详细代码了:
$(function(){var a = 0;//初始化变量为0,记录点击次数var pageVal = localStorage.getItem('pageStatus');//定义变量接住缓存的数据if(pageVal){//如果已经有缓存,说明至少已经点击过一次a = pageVal; //此时应该使用缓存中的皮肤状态}$('#changeSkin').on('click',function(){//点击切换皮肤按钮,触发事件a++;//点击次数+1;localStorage.setItem('pageStatus',a);//设置点击后的点击数到本地缓存中去if(a%2==1){//如果此时的点击数是单数$('#Skin').attr('href','blue.css');//那么使用蓝色皮肤}else{//否则$('#Skin').attr('href','red.css');//使用红色皮肤}});if(pageVal%2==1){$('#Skin').attr('href','blue.css');//那么使用蓝色皮肤}else{//否则$('#Skin').attr('href','red.css');//使用红色皮肤}
})
刷新的时候是不会皮肤是不会更改到点击之前的。当关闭页面的时候,再打开,之前设置的皮肤也不会更改。
这样就大功告成啦!!!
其实换肤就是把颜色改一下风格,这样的话使用less预编译编译样式,会方便很多,修改的时候也很方便
jQuery实现网站换肤相关推荐
- ASP.NET2.0中themes、Skins轻松实现网站换肤!
ASP.NET2.0中themes.Skins轻松实现网站换肤! 可能有些朋友还不是很清楚themes.skins.下面先介绍下themes.skins.. 一.简介: 一看Themes.Skins这 ...
- jQuery制作360换肤
jQuery制作360换肤 <body><button>换肤</button><div class='box'><ul class='uls'&g ...
- ASP.NET 2.0中轻松实现网站换肤
一.简介: 利用Themes我们可以很容易的更改控件.页面的风格,而不需要修改我们的代码和页面文件.Themes文件被单独的放在1个App_Themes文件夹下面,与你的程序是完全分开的. 二.怎么使 ...
- stylish网站换肤与网站分析妙用
作者:吴甜甜 个人博客网站: wutiantian.github.io 微信公众号: 吴甜甜的博客 stylish是火狐浏览器等平台的换肤插件 结合F12开发者功能可以进行: 背景色看起来不舒服,想换 ...
- vue + element-ui动态主题及网站换肤2021,亲测可用
原文地址 猛击标题 预览主题切换效果 本文 git 仓库地址 猛击查看 本文主题换肤整体实现换肤思路是,定制多套 element-ui 主题,然后通过动态更改 link href样式文件来实现,最后结 ...
- JQuery 网站换肤功能
我第一次看到样式表切换器是在A List Apart或者Simple Bits,那是两个设计师最应该去的网站. 从那以后,我找到了很多可以让访客通过鼠标点击某个地方切换样式表的方法.但最近我要写一篇如 ...
- jquery.cookie中的操作之与换肤
jquery.cookie.js的插件,插件的源代码如下: /*** Cookie plugin** Copyright (c) 2006 Klaus Hartl (stilbuero.de)* Du ...
- ExtJs2.0学习系列(15)--extjs换肤
extjs的默认皮肤很好看,但是我们还可以变换样式切换其他皮肤. 1.直接添加其他css文件换肤. 皮肤文件:xtheme-olive.zip下载 把皮肤文件解压,把css文件(如xtheme-oli ...
- ajax换肤,聊一聊前端换肤
之前在做网站换肤,所以今天想聊聊网站换肤的实现.网页换肤就是修改颜色值,因此重点就在于怎么来替换. 一般实现 如上图,我们会看到在某些网站的右上角会出现这么几个颜色块,点击不同的颜色块,网站的整体颜色 ...
最新文章
- LeetCode简单题之交替位二进制数
- k8s aws 部署_如何在短短30分钟内使用CircleCI设置到AWS S3的持续部署
- .Lucky后缀勒索病毒数据解密
- java信息管理系统总结_java实现科研信息管理系统
- mysql连库串_数据库连接串整理 - osc_ac5z111b的个人空间 - OSCHINA - 中文开源技术交流社区...
- 服务器维修工单,运维工单--服务器申请工单
- “封号斗罗” 程序员修炼之道:通向务实的最高境界
- AVC与HEVC的差异-帧内预测
- 2016年1月.CN域名总量净增44.7万 增速环比下降
- 江苏高考可以用计算机嘛,2018江苏高考计算机网上评卷考生作答须知
- 贴片晶振为什么要邻层挖空敷铜,背后的原理原来是这样的!#终南小师傅
- 简单linux命令之备份文件
- 2023最新SSM计算机毕业设计选题大全(附源码+LW)之java校园竞赛管理系统设计与实现hyr9b
- Android开发从零开始
- Java对象 转 JSON 字符串
- rust画质怎么设置不卡顿_腐蚀游戏怎么提高帧数 Rust设置隐藏画质提高FPS教程
- 【Python量化】如何监测领涨板块,挖掘题材龙头股?
- excel减法函数_发现EXCEL隐藏功能,SUMIFS函数居然可以多条件求差值看了不后悔...
- 关于RecyclerView 兼顾setHasStableIds与Item动画问题
- 全国地理信息资源服务系统行政边界矢量数据下载教程