JavaScript实现换肤功能


Posted in Javascript onSeptember 15, 2017

一,js换肤的基本原理

基本原理很简单,就是使用 JS 切换对应的 CSS 样式表文件。例如导航网站 Hao123 的右上方就有网页换肤功能。除了切换 CSS 样式表文件之外,通常的网页换肤还需要通过 Cookie 来记录用户之前更换过的皮肤,这样下次用户访问的时候,就可以自动使用上次用户配置的选项。 那么基本工作流程就出来了:访问网页——JS 读取 Cookie ——如果没有,使用默认皮肤——如果有,使用指定皮肤;用户点击换肤选项——JS 控制替换对应的 CSS 样式表——将皮肤选项写进 Cookie 保存。

JavaScript实现换肤功能

二,事先需要的准备工作

1,不同的皮肤对应不同的css文件,准备好多套css样式文件:

如蓝色对应:skinColour_blue.css

黄色对应:skinColour_yellow.css

2,图片存放在不同的皮肤文件夹下:

例如,蓝色对应:blue文件夹;黄色对应:yellow文件夹。

将不同皮肤颜色的图片放在相对应的文件夹里,图片切换原理:在换肤函数里设置img标签的src路径属性来切换图片。

三,换肤实现的过程

1,在网页开头引入css文件

<link href="Content/aps/skinNone.css" rel="external nofollow" rel="stylesheet" type="text/css" id="skinColour" />

2,在页面上定义2个皮肤切换按钮

<span class="skin-btn-blue" onclick="changeSyle('blue');" >蓝色</span>
<span class="skin-btn-yellow" onclick="changeSyle('yellow');" >黄色</span>

3,在js的代码,通过函数触发切换<link>标签的css路径,和图片的路径,来实现换肤

//把引入皮肤css路径<link>标签选出来
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');
}

四,总结换肤遇到的问题

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

1),通过本地存储获取皮肤名函数取到皮肤名值,判断这个值是否有,有的话,就用取到皮肤名,没取到值就用默认的blue蓝色

//html5获取本地存储皮肤
  var cssName2 = getStorage("skinName");
  //判断皮肤名,切换图片路径
  var imgSrcCinema;
  if (cssName2 && cssName2 != null) {
    imgSrcCinema = cssName2;
  } else {
    imgSrcCinema = 'blue';
  };

2),在js动态生成的地方写法:通过字符串拼接,+变量来实现

var liImg = '<div class="film-vidctn3"><img class="videoimg" src="../../img/' + imgSrcCinema + '/cinema-yzl_09.png"></div>';
    $("." + pos).html(liImg);

 2,点击按钮变色的效果换肤:

可以在不同的css文件里定义同名class,样式根据不同皮肤各自另外写。

例如:在蓝色皮肤skinColour_blue.css

/*js点击时的样式*/
.zhleftclick{
  background-color: rgba(0, 201, 212, 0.5) !important;
}

在黄色皮肤skinColour_yellow.css

/*1,js点击时的样式*/
.zhleftclick{
  background-color: #43490f !important;
}

在js里添加class就可以解决不同皮肤下的点击效果,原理是:在不同的皮肤状态下引用的皮肤css文件不一样来达到。

$('.icon01').off('mousedown touchstart').on('mousedown touchstart', function () {
      $('.icon01').removeClass('zhleftclick').addClass('zhleftclick');
  })

3,另外一种点击变色效果换肤:

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

//html5获取本地存储皮肤
  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, 109, 73)";
  };
$("#ul input:eq(0)").attr("data-num", "1").css({ background: "" + colorBright + "" });

总结

以上所述是小编给大家介绍的JavaScript实现换肤功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery 将disabled的元素置为enabled的三种方法
Jul 25 Javascript
jQuery中$.fn的用法示例介绍
Nov 05 Javascript
JavaScript动态修改背景颜色的方法
Apr 16 Javascript
JavaScript判断微信浏览器实例代码
Jun 13 Javascript
JS 获取HTML标签内的子节点的方法
Sep 21 Javascript
基于input框覆盖掉数字英文的实例讲解
Jul 21 Javascript
Angular实现预加载延迟模块的示例
Oct 12 Javascript
JS基于对象的特性实现去除数组中重复项功能详解
Nov 17 Javascript
vue实现的上传图片到数据库并显示到页面功能示例
Mar 17 Javascript
create-react-app 修改为多入口编译的方法
Aug 01 Javascript
JS数组中对象去重操作示例
Jun 04 Javascript
node 解析图片二维码的内容代码实例
Sep 11 Javascript
jQuery实现火车票买票城市选择切换功能
Sep 15 #jQuery
详解Vue.js Mixins 混入使用
Sep 15 #Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
Sep 15 #Javascript
Node.js实现连接mysql数据库功能示例
Sep 15 #Javascript
vue实现登陆登出的实现示例
Sep 15 #Javascript
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
Sep 15 #Javascript
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 #jQuery
You might like
rrmdir php中递归删除目录及目录下的文件
2011/05/15 PHP
解析PHP中ob_start()函数的用法
2013/06/24 PHP
PHP基于GD库的缩略图生成代码(支持jpg,gif,png格式)
2014/06/19 PHP
为PHP5.4开启Zend OPCode缓存
2014/12/26 PHP
一个简单的Ext.XTemplate的实例代码
2012/03/18 Javascript
JavaScript 更严格的相等 [译]
2012/09/20 Javascript
下拉菜单点击实现连接跳转功能的js代码
2013/05/19 Javascript
Jquery多选框互相内容交换的实例代码
2013/07/04 Javascript
JS实现Enter键跳转及控件获得焦点
2013/08/12 Javascript
jQuery遍历Form示例代码
2013/09/03 Javascript
jquery弹窗插件colorbox绑定动态生成元素的方法
2014/06/20 Javascript
页面加载完后自动执行一个方法的js代码
2014/09/06 Javascript
微信小程序 教程之wxapp视图容器 scroll-view
2016/10/19 Javascript
DropDownList控件绑定数据源的三种方法
2016/12/24 Javascript
Angular.js跨controller实现参数传递的两种方法
2017/02/20 Javascript
jquery获取链接地址和跳转详解(推荐)
2017/08/15 jQuery
Nuxt.js之自动路由原理的实现方法
2018/11/21 Javascript
详解vue 动态加载并注册组件且通过 render动态创建该组件
2019/05/30 Javascript
一文看懂如何简单实现节流函数和防抖函数
2019/09/05 Javascript
JavaScript DOM常用操作代码汇总
2020/07/03 Javascript
[05:35]DOTA2英雄梦之声_第13期_拉比克
2014/06/21 DOTA
python实现在每个独立进程中运行一个函数的方法
2015/04/23 Python
Python 解决中文写入Excel时抛异常的问题
2018/05/03 Python
Python3实现转换Image图片格式
2018/06/21 Python
python pygame模块编写飞机大战
2018/11/20 Python
python多线程同步之文件读写控制
2021/02/25 Python
python装饰器使用实例详解
2019/12/14 Python
对Tensorflow中Device实例的生成和管理详解
2020/02/04 Python
HTML5 embed 标签使用方法介绍
2013/08/13 HTML / CSS
Canvas图片分割效果的实现
2019/07/29 HTML / CSS
如何利用find命令查找文件
2015/02/07 面试题
linux面试题参考答案(10)
2016/10/26 面试题
顶撞领导检讨书
2014/01/29 职场文书
2015年加油站工作总结
2015/05/13 职场文书
团结主题班会
2015/08/13 职场文书
使用refresh_token实现无感刷新页面
2022/04/26 Javascript