javascript/jquery换肤功能实现

六月初六月初 JavaScipt 2018-11-19 10:11:50

网站换肤，是在网站中比较常用的一个功能，本文将就换肤实现功能进行一个原理的解剖！

换肤原理说明：

    网站护肤，大致分为背景图的改变或者整体主色调的改变。

    背景图的改变，需要你准备不同的背景图来供应换肤的切换；

    网站主色调的改变则需要你每种主色调有不同的css样式来提供，相对而言主色调的换肤比背景的换肤代码量及难度要多很多！

    无论是背景换肤还是网页主色调换肤，其主要原理都是利用浏览器的本地缓存来进行数据存储，网页再根据你本地的存储信息来进行换肤的处理！

换肤具体实现代码：（这里主要讲localStorage方法！）

JS部分：

localStorage.setItem("bgname","1.jpg")//bgname 存储在本地的名称   1.jpg当前换肤的背景图

HTML部分：

<body style="background: url('2.jpg');">
	<input type="button" onclick="test()" name="" id="" value="点击切换" />
	<script>
		function test(){
			var nowbg = localStorage.getItem("bgname");
			if(nowbg != "" || nowbg != null){//判断是否有设置换肤
				$("body").css("background-image","url("+nowbg+")");
			}
		}
	</script>
</body>

以上便实现了背景图的切换，同理网页主色调的切换也是是如此，只是把背景图改成了css路径而已。

结语：该方法的实现，只能实现对某台电脑或者手机本地的处理，如果你想换肤的效果在一个设备上设置了其余设备也同时生效。那么可以把这数据存储到数据库，每次加载网页是从数据库读取出当前皮肤设置。

    

六月初字帖坊小程序 你想要的字帖模板及工具，这里都有！