JavaScript实现换肤功能

首先，js皮肤的基本原理

基本原理很简单，就是用JS切换对应的CSS样式表文件。比如导航网站Hao123右上角有网页换肤功能。除了切换CSS样式表文件之外，还需要通过Cookie记录用户更改的皮肤，以便用户下次访问时可以自动使用用户上次配置的选项。然后基本的工作流程出来了：访问网页——JS，阅读Cookie ——。如果没有，使用默认皮肤——。如果是，使用指定的皮肤；用户点击皮肤选项——JS，控制对应CSS样式表——的替换，将皮肤选项写入Cookie保存。

二、提前需要的准备工作

1、不同的皮肤对应不同的css文件，准备多套css样式文件：

对应蓝色：skinColour _ blue.css

黄色对应：skinColour _ yellow.css

2.图片存储在不同的皮肤文件夹中：

比如蓝色对应：蓝色文件夹；黄色信件：黄色文件夹。

将不同肤色的图片放在相应的文件夹中。图片切换原理：在换肤功能中设置img标签的src路径属性来切换图片。

第三，换肤实现的过程

1.在网页的开头介绍css文件

链接href=' content/APS/skinnone . CSS ' rel=' external nofollow ' rel='样式表' type=' text/CSS ' id=' skincolor '/2，在页面上定义两个皮肤切换按钮

span class=' skin-BTN-blue ' onclick=' changeSyle(' blue ')；'蓝色/span span class='皮肤-BTN-黄色' onclick=' changesyle('黄色')；'黄色/span3，在js代码中，通过函数触发器切换链接标签的css路径和图片的路径，实现蒙皮

//选择导入皮肤的css路径的链接标签。var CSS style=document . getelementbyid(' skincolour ')；//换肤功能函数changesyle (name) {event。stop propagation()；csstyle . href=' Content/APS/skincolor _ ' name '。CSS '；//保存肤色名称setStorage('skinName '，name)；//切换图片$('的路径。home-b return’)。attr ('src '，' img/' name '/home _ yzl _ 8 . png ')；$('.主页-BHome’)。attr('src '，' img/' name '/home _ yzl _ 7 . png ')；}//html5设置本地存储功能设置存储(sname，vul){ window . local storage . setitem(sname，vul)；}函数GetStorage(attr){ var str=window . local storage . GetItem(attr)；返回字符串；}//访问本地存储并获取皮肤名称varcssname=getstorage(' skin name ')；//要判断是否有皮肤名称，使用获取的皮肤名称，否则使用默认的if (cssName cssName！=null){ csstyle . href=' Content/APS/skincolor _ ' cssName '。CSS '；//设置图片路径$('。home-b return’)。attr ('src '，' img/' CSS name '/home _ yzl _ 8 . png ')；$('.主页-BHome’)。attr('src '，' img/' CSS name '/home _ yzl _ 7 . png ')；}else{//使用不带皮肤的蓝色默认路径CSS style . href=' content/APS/skin color _ blue . CSS '；//设置默认图片路径$('。home-b return’)。attr ('src '，' img/blue/home _ yzl _ 8 . png ')；$('.主页-BHome’)。attr('src '，' img/blue/home _ yzl _ 7 . png ')；}四、总结皮肤年轻化遇到的问题

1.js动态生成的换肤标签，例如jq通过字符串拼接添加到页面上的img图片标签中

1)、通过本地存储获取皮肤名称函数获取皮肤名称值，并判断该值是否存在，如果存在，则使用皮肤名称，如果没有获取值，则使用默认的蓝色蓝色。

//html5获取本地存储皮肤varcss name 2=get storage(' skin name ')；//判断皮肤名称，切换图片路径var imgSrcCinemaif (cssName2 cssName2！=null){ imgSrcCinema=cssname 2；} else { imgSrcCinema=' blue};2)写在动态生成js的地方：通过字符串拼接和变量

var LiIMg=' div class=' film-vid ctn 3 ' img class=' video img ' src=' http :/./img/' imgSrcCinema '/cinema-yzl _ 09 . png '/div '；$('.'pos)。html(LiIMg)；2.点击按钮改变颜色和皮肤：

同名的类可以在不同的css文件中定义，样式根据不同的皮肤分别编写。

例如：皮肤颜色为蓝色的皮肤

/*js单击时的样式*/。zhleftclick { background-color : rgba(0，201，212，0.5)！重要；}黄色皮肤中的skinColour_yellow.css

/* 1，js点击时的样式*/。zhleftclick { background-color : # 43490 f！重要；}在js中添加类可以解决不同皮肤条件下的点击效果。原理是不同皮肤条件下引用的皮肤css文件是不同的。

$(. icon 01 ')。关闭(“mousedown touchstart”)。on('mousedown touchstart '，function(){ $(. icon 01 ')。removeClass('zhleftclick ')。addCLaSS(' zhleftclick ')；})3、另一种点击变色效果：

首先通过本地存储获取皮肤名称，然后定义一个颜色变量，判断不同的皮肤名称，改变变量的内容，达到不同皮肤下的点击效果。

//html5获取本地存储皮肤varcss name 2=get storage(' skin name ')；//点击颜色变化var colorBright//点击背景亮化if(CSS name 2 sssname 2！=null){ if(cssname 2==' blue '){ color bright=' RGB(226，109，73)'；} else if (cssName2=='黄色'){ colorBright=' # acbf04} else if (CSS名称2==' red '){ } } else {//没有皮肤，默认为蓝色亮色=' RGB (226，109，73)'；};$('#ul input:eq(0)')。attr('data-num '，' 1 ')。CSS({ background : ' ' ColorBright ' ' })；摘要

以上是边肖介绍的JavaScript换肤功能，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！