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 相关文章推荐
javascript里模拟sleep(两种实现方式)
Jan 25 Javascript
js/html光标定位的实现代码
Sep 23 Javascript
js判断ie版本号的简单实现代码
Mar 05 Javascript
提交按钮的name='submit'引起的js失效问题及原因
Feb 25 Javascript
AngularJS的一些基本样式初窥
Jul 27 Javascript
JavaScript encodeURI 和encodeURIComponent
Dec 04 Javascript
js获取html页面代码中图片地址的实现代码
Mar 05 Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
Aug 24 Javascript
实现vuex与组件data之间的数据同步更新方式
Nov 12 Javascript
js实现图片上传到服务器和回显
Jan 19 Javascript
js 获取扫码枪输入数据的方法
Jun 10 Javascript
解决antd 下拉框 input [defaultValue] 的值的问题
Oct 31 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
php修改时间格式的代码
2011/05/29 PHP
php中使用preg_match_all匹配文章中的图片
2013/02/06 PHP
一个PHP针对数字的加密解密类
2014/03/20 PHP
php检测url是否存在的方法
2015/04/14 PHP
php处理单文件、多文件上传代码分享
2016/08/24 PHP
PHP输出XML格式数据的方法总结
2017/02/08 PHP
php实现商城购物车的思路和源码分析
2020/07/23 PHP
一个基于jQuery的树型插件(OrangeTree)使用介绍
2012/05/03 Javascript
javascript 日期时间 转换的方法
2013/02/21 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
2014/04/15 Javascript
javascript数组去重方法汇总
2015/04/23 Javascript
详解JavaScript中shift()方法的使用
2015/06/09 Javascript
jfinal与bootstrap的登录跳转实战演习
2015/09/22 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
2016/09/02 Javascript
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
2017/03/22 jQuery
ES6中参数的默认值语法介绍
2017/05/03 Javascript
vue.js路由跳转详解
2017/08/28 Javascript
详解基于Koa2开发微信二维码扫码支付相关流程
2018/05/16 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
2018/11/14 jQuery
如何让node运行es6模块文件及其原理详解
2018/12/11 Javascript
vue的列表交错过渡实现代码示例
2019/05/05 Javascript
vue实现PC端录音功能的实例代码
2019/06/05 Javascript
原生js实现的移动端可拖动进度条插件功能详解
2019/08/15 Javascript
JS实现页面数据懒加载
2020/02/13 Javascript
jQuery实现html可联动的百分比进度条
2020/03/26 jQuery
javascript设计模式 ? 观察者模式原理与用法实例分析
2020/04/22 Javascript
Vue+Element自定义纵向表格表头教程
2020/10/26 Javascript
python网络爬虫采集联想词示例
2014/02/11 Python
python根据京东商品url获取产品价格
2015/08/09 Python
python模块之time模块(实例讲解)
2017/09/13 Python
python爬虫headers设置后无效的解决方法
2017/10/21 Python
python抓取文件夹的所有文件
2018/02/27 Python
python保存二维数组到txt文件中的方法
2018/11/15 Python
使用Windows批处理和WMI设置Python的环境变量方法
2019/08/14 Python
介绍一下Java中的Class类
2015/04/10 面试题
小学一年级评语大全
2014/04/22 职场文书