js实现换肤效果

  • 时间:2018-06-06 01:56 作者:江苏优就业 来源:江苏优就业 阅读:159
  • 扫一扫,手机访问
摘要:一,js换肤的基本原理基本原理很简单,就是用 JS 切换对应的 CSS 样式表文件。例如导航网站 Hao123 的右上方就有网页换肤功可以。除了切换 CSS 样式表文件之外,通常的网页换肤还需要通过 Cookie 来记录使用户之前更换过的皮肤,这样下次使用户访问的时候,即可以自动用上次使用户配置的选

一,js换肤的基本原理

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

js实现换肤效果

二,事前需要的准备工作

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

如蓝色对应:skinColour_blue.css

黄色对应:skinColour_yellow.css

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

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

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

三,换肤实现的过程

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

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

蓝色黄色

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

//把引入皮肤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');

}

四,总结换肤遇到的问题

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 = '
'; $("." + 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 + "" });

  • 全部评论(0)
最新发布的资讯信息
【系统环境|】2019蚂蚁金服面试总结(Java方向)(2019-04-18 16:19)
【系统环境|】notepad++ 三位数字正则替换规则(2019-04-12 23:02)
【系统环境|服务器应用】网络工程师跨交换机的Vlan配置与管理知识(2019-03-26 02:14)
【系统环境|服务器应用】最小化的定制版linux系统:CoreOS(2019-03-26 02:14)
【系统环境|服务器应用】分布式系统面试题:分布式事务处理方案?(2019-03-26 02:13)
【系统环境|服务器应用】带着网关去旅行(系列二):防止vps上ssh端口被恶意扫描(2019-03-26 02:13)
【系统环境|服务器应用】美团iOS面试总结(2019-03-26 02:13)
【系统环境|服务器应用】百度iOS面试总结(2019-03-26 02:13)
【系统环境|服务器应用】Java大佬之学习历程(三)(2019-03-26 02:13)
【系统环境|服务器应用】Android面试集锦系列(38)——在项目中使用AsyncTask会有什么问题吗?(2019-03-26 02:13)
手机二维码手机访问领取大礼包
返回顶部