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 获取用户客户端操作系统版本
Aug 25 Javascript
网页禁用右键实现代码(JavaScript代码)
Oct 29 Javascript
为jQuery增加join方法的实现代码
Nov 28 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
May 12 Javascript
原生js和css实现图片轮播效果
Feb 07 Javascript
angular十大常见问题
Mar 07 Javascript
AngularJS页面传参的5种方式
Apr 01 Javascript
基于hover的用法实例(推荐)
Jul 04 Javascript
webpack 1.x升级过程中的踩坑总结大全
Aug 09 Javascript
Angular2+如何去除url中的#号详解
Dec 20 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
Apr 22 Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
Jul 29 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绘图技术
2013/07/03 PHP
双冒号 ::在PHP中的使用情况
2015/11/05 PHP
thinkphp整合微信支付代码分享
2016/11/24 PHP
thinkPHP5.0框架简单配置作用域的方法
2017/03/17 PHP
PHP中$GLOBALS['HTTP_RAW_POST_DATA']和$_POST的区别分析
2017/07/03 PHP
JavaScript中的prototype使用说明
2010/04/13 Javascript
javascript转换字符串为dom对象(字符串动态创建dom)
2010/05/10 Javascript
解决JS中乘法的浮点错误的方法
2014/01/03 Javascript
超级简单的jquery操作表格方法
2014/12/15 Javascript
JavaScript设计模式初探
2016/01/07 Javascript
ajax接收后台数据在html页面显示
2017/02/19 Javascript
JS实现上传图片实时预览功能
2017/05/22 Javascript
JavaScript异步上传图片文件的实例代码
2017/07/04 Javascript
webpack2.0配置postcss-loader的方法
2017/08/17 Javascript
动态加载权限管理模块中的Vue组件
2018/01/16 Javascript
nodejs实现范围请求的实现代码
2018/10/12 NodeJs
React降级配置及Ant Design配置详解
2018/12/27 Javascript
JavaScript canvas绘制圆弧与圆形
2020/02/18 Javascript
[03:17]2014DOTA2 国际邀请赛中国区预选赛 四强专访
2014/05/23 DOTA
[01:10]为家乡而战!完美世界城市挑战赛全国总决赛花絮
2019/07/25 DOTA
[50:54]完美世界DOTA2联赛 GXR vs IO 第三场 11.07
2020/11/10 DOTA
python的变量与赋值详细分析
2017/11/08 Python
python实现拓扑排序的基本教程
2018/03/11 Python
在PyCharm中三步完成PyPy解释器的配置的方法
2018/10/29 Python
Python 调用 zabbix api的方法示例
2019/01/06 Python
Python中类的创建和实例化操作示例
2019/02/27 Python
python如何进行矩阵运算
2020/06/05 Python
汤米巴哈马官方网站:Tommy Bahama
2017/05/13 全球购物
澳大利亚香水在线:Price Rite Mart
2017/12/28 全球购物
DogBuddy荷兰:找到你最完美的狗保姆
2019/04/17 全球购物
护理专业推荐信
2013/11/07 职场文书
会计岗位职责模板
2014/03/12 职场文书
合作协议书模板2014
2014/09/26 职场文书
大学生求职自荐信
2015/03/24 职场文书
致运动员加油稿
2015/07/21 职场文书
《最终幻想14》6.01版本4月5日推出 追加新任务新道具
2022/04/03 其他游戏