JavaScript实现换肤功能
前端之家收集整理的这篇文章主要介绍了
JavaScript实现换肤功能,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
@H_3010@一,js换肤的基本原理
@H
301_0@基本原理很简单,就是使用 JS 切换对应的 CSS 样式表
文件。例如导航网站 Hao123 的右上方就有网页换肤
功能。除了切换 CSS 样式表
文件之外,通常的网页换肤还需要通过 Cookie 来记录
用户之前更换过的皮肤,这样下次
用户访问的时候,就可以
自动使用上次
用户配置的选项。 那么基本工作流程就出来了:访问网页——JS 读取 Cookie ——如果没有,使用默认皮肤——如果有,使用指定皮肤;
用户点击换肤选项——JS 控制替换对应的 CSS 样式表——将皮肤选项写进 Cookie 保存。
<p style="text-align: center">

@H_
3010@二,事先需要的准备工作
@H301_0@1,不同的皮肤对应不同的css
文件,准备好多套css样式
文件:
@H_
301_0@如蓝色对应:skinColour
blue.css
@H301_0@黄色对应:skinColour
yellow.css
@H301_0@2,
图片存放在不同的皮肤
文件夹下:
@H_
301_0@例如,蓝色对应:blue
文件夹;黄色对应:yellow
文件夹。
@H_
301_0@将不同皮肤颜色的
图片放在相对应的
文件夹里,
图片切换原理:在换肤
函数里设置
img标签的src路径
属性来切换
图片。
@H_
3010@三,换肤实现的过程
@H301_0@1,在网页开头引入css
文件
<div class="jb51code">
<pre class="brush:js;">
@H_
301_0@2,在
页面上定义2个皮肤切换按钮
蓝色
黄色
@H_
301_0@3,在js的
代码,通过
函数触发切换
标签的css路径,和
图片的路径,来实现换肤
标签选出来
var cssStyle = document.getElementById('skinColour');
//换肤
函数
function changeSyle(name) {
event.stopPropagation();
cssStyle.href = "Content/aps/skinColour_" + name + ".css";
//保存肤色名
setStorage("skinName",name);
//切换
图片的路径
$('.home-bReturn').attr('src','img/' + name + '/home_yzl_8.png');
$('.home-bHome').attr('src','img/' + name + '/home_yzl_7.png');
}
//html5设置本地存储
function setStorage(sname,vul) {
window.localStorage.setItem(sname,vul);
}
function getStorage(attr) {
var str = window.localStorage.getItem(attr);
return str;
}
//访问本地存储,
获取皮肤名
var cssName = getStorage("skinName");
//判断是否有皮肤名,就使用
获取的皮肤名,没有就用默认的
if (cssName && cssName != null) {
cssStyle.href = "Content/aps/skinColour_" + cssName + ".css";
//设置
图片路径
$('.home-bReturn').attr('src','img/' + cssName + '/home_yzl_8.png');
$('.home-bHome').attr('src','img/' + cssName + '/home_yzl_7.png');
}else{
//没有皮肤就使用blue默认的路径
cssStyle.href = "Content/aps/skinColour_blue.css";
//设置默认
图片路径
$('.home-bReturn').attr('src','img/blue/home_yzl_8.png');
$('.home-bHome').attr('src','img/blue/home_yzl_7.png');
}
@H_
301_0@
四,总结换肤遇到的问题
@H_
301_0@1,js动态
生成的
标签换肤,例如jq通过字符串拼接,
添加到
页面上的img
图片标签
@H_
301_0@1),通过本地存储
获取皮肤名
函数取到皮肤名值,判断这个值是否有,有的话,就用取到皮肤名,没取到值就用默认的blue蓝色
获取本地存储皮肤
var cssName2 = getStorage("skinName");
//判断皮肤名,切换
图片路径
var imgSrcCinema;
if (cssName2 && cssName2 != null) {
imgSrcCinema = cssName2;
} else {
imgSrcCinema = 'blue';
};
@H_
301_0@2),在js动态
生成的地方写法:通过字符串拼接,+变量来实现
';
$("." + pos).html(liImg);
@H_
301_0@2,点击按钮变色的
效果换肤:
@H_
301_0@可以在不同的css
文件里定义同名class,样式根据不同皮肤各自另外写。
@H_
301_0@例如:在蓝色皮肤skinColour_blue.css
@H_
301_0@在黄色皮肤skinColour_yellow.css
@H_
301_0@在js里
添加class就可以
解决不同皮肤下的点击
效果,原理是:在不同的皮肤状态下引用的皮肤css
文件不一样来达到。
@H_
301_0@3,另外一种点击变色
效果换肤:
@H_
301_0@先通过本地存储
获取皮肤名,再定义一个颜色变量,判断不同的皮肤名,来改变变量的
内容,来达到在不同皮肤下的点击
效果。
获取本地存储皮肤
var cssName2 = getStorage("skinName");
//点击变色
var colorBright; //点击背景变亮色
if (cssName2 && cssName2 != null) {
if (cssName2 == "blue") {
colorBright = "rgb(226,109,73)";
} else if (cssName2 == "yellow") {
colorBright = "#acbf04";
} else if (cssName2 == "red") {
}
} else {
//没有皮肤,默认是蓝色blue
colorBright = "rgb(226,73)";
};
$("#ul input:eq(0)").attr("data-num","1").css({ background: "" + colorBright + "" });
@H_
301_0@
总结
@H_
301_0@以上所述是小编给大家介绍的JavaScript实现换肤
功能。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可
分享给好友!感谢
支持。