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判断两个元素是否有重叠部分的代码
Jul 25 Javascript
js验证模型自我实现的具体方法
Jun 21 Javascript
将input file的选择的文件清空的两种解决方案
Oct 21 Javascript
js中prototype用法详细介绍
Nov 14 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
Feb 13 Javascript
使用ngView配合AngularJS应用实现动画效果的方法
Jun 19 Javascript
jquery模拟实现鼠标指针停止运动事件
Jan 12 Javascript
解析vue中的$mount
Dec 21 Javascript
微信小程序项目总结之点赞 删除列表 分享功能
Jun 25 Javascript
Vue 组件注册实例详解
Feb 23 Javascript
vue项目打包之开发环境和部署环境的实现
Apr 23 Javascript
Vue 样式切换及三元判断样式关联操作
Aug 09 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
基于文本的访客签到簿
2006/10/09 PHP
PHP Zip压缩 在线对文件进行压缩的函数
2010/05/26 PHP
利用Memcached在php下实现session机制 替换PHP的原生session支持
2010/08/21 PHP
PHP备份数据库生成SQL文件并下载的函数代码
2012/02/05 PHP
php读取csv数据保存到数组的方法
2015/01/03 PHP
php unlink()函数使用教程
2018/07/12 PHP
IE无法设置短域名下Cookie
2010/09/23 Javascript
纯js写的分页表格数据为json串
2014/02/18 Javascript
jQuery中:selected选择器用法实例
2015/01/04 Javascript
使用CoffeeScrip优美方式编写javascript代码
2015/10/28 Javascript
谈谈AngularJs中的隐藏和显示
2015/12/09 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
2016/06/15 Javascript
Nodejs下用submit提交表单提示cannot post错误的解决方法
2016/11/21 NodeJs
AngularJs每天学习之总体介绍
2017/08/07 Javascript
vue2.0s中eventBus实现兄弟组件通信的示例代码
2017/10/25 Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
2019/05/07 Javascript
基于Vue el-autocomplete 实现类似百度搜索框功能
2019/10/25 Javascript
Python 机器学习库 NumPy入门教程
2018/04/19 Python
使用tensorflow实现线性svm
2018/09/07 Python
PIL图像处理模块paste方法简单使用详解
2019/07/17 Python
python try except返回异常的信息字符串代码实例
2019/08/15 Python
numpy实现神经网络反向传播算法的步骤
2019/12/24 Python
python中pandas库中DataFrame对行和列的操作使用方法示例
2020/06/14 Python
Python3爬虫中Ajax的用法
2020/07/10 Python
Python 内存管理机制全面分析
2021/01/16 Python
详解Python爬虫爬取博客园问题列表所有的问题
2021/01/18 Python
CSS3中的弹性布局em运用入门详解 1em等于多少像素
2021/02/08 HTML / CSS
土耳其风格手工珠宝:Ottoman Hands
2019/07/26 全球购物
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类
2012/02/06 面试题
Python面试题:Python里面如何生成随机数
2015/03/12 面试题
我的梦中国梦演讲稿
2014/04/23 职场文书
保护野生动物倡议书
2014/05/16 职场文书
高中课前三分钟演讲稿
2014/09/13 职场文书
2014年客房部工作总结
2014/11/22 职场文书
前台接待岗位职责范本
2015/04/03 职场文书
UNION CREATIVE《Re:从零开始的异世界生活》雷姆手办
2022/03/20 日漫