WO2018176207A1

WO2018176207A1 - Web主题切换方法及系统

Info

Publication number: WO2018176207A1
Application number: PCT/CN2017/078370
Authority: WO
Inventors: 孙艳峥; 王佳; 费晓家
Original assignee: 深圳中兴力维技术有限公司
Priority date: 2017-03-28
Filing date: 2017-03-28
Publication date: 2018-10-04

Abstract

本发明公开了一种Web主题切换方法及系统，属于互联网技术领域。该方法包括：将主题切换所需的图像素材进行合成，得到背景图像；在Web页面中，引入公共CSS文件及JS文件，在公共CSS文件中添加背景图像定位属性；在主题切换时，通过JS文件动态改变背景图像定位属性的值，以将背景图像中对应的内容进行切换。本发明通过将图像素材合成为一个背景图像后，采用背景图像定位的方式，利用一个CSS文件即可实现多个主题类型之间的相互切换，避免了主题切换时引入重复文件，简化开发模式、节约开发时间，减少web服务器发布重复的资源，减少用户频繁的文件请求，实现无刷新主题切换，提升用户体验。

Description

Web主题切换方法及系统

技术领域

[0001] 本发明涉及互联网技术领域，尤其涉及一种 Web主题切换方法及系统。

背景技术

[0002] 目前的主题切换通常采用的方法有： 1、设计两套以上的界面，通过指向不同的界面文件完成主题切换功能，这相当于幵发两套以上系统，所有界面设计及样式库均不共用，这样的好处是界面设计丰富性，可操作性较强，自由度较高。但是幵发两套以上系统界面需要投入更多的人力及吋间，对于一般的门户网站，主题切换往往改动并不大，只有个别 logo、图片、颜色需要切换，所以并不需要幵发两套以上系统； 2、通过点击自定义的主题样式，利用 Javascript技术或者 Spring Mvc等技术动态改变页面当前弓 I用的主题 CSS文件，并且将当前的主题样式写入 Cookie、 Session或者写入数据库中，以便于下次该用户重新访问页面吋，调用的就是上次设置好的主题样式。这种方式不要要设计多套 html界面文件，只需设计多套 ess主题文件以及对应的切图文件，不同主题的 ess文件及图片存放的路径不同，当用户需要切换主题皮肤的吋候，只需指向 theme文件夹下的不同主题文件夹下的 CSS文件。

[0003] 上述技术方案存在以下缺点： 1、需要多套样式库， 2、文件目录结构比较多， 3、切换主题吋需要重新请求图片及 CSS文件。采用上述技术方案在主题切换吋会造成的重复文件的引入，以及幵发多套主题使得需要重复幵发工作，并且主题切换会导致频繁的 Web请求。

技术问题

[0004] 有鉴于此，本发明的目的在于提供一种 Web主题切换方法及系统，以解决现有技术中需要通过需要重复幵发多套系统或者多个 CSS文件以实现主体切换的功能，导致幵发工作大量重复、 Web请求频繁的问题。

问题的解决方案

技术解决方案 [0005] 本发明解决上述技术问题所采用的技术方案如下：

[0006] 根据本发明的一个方面，提供的一种 Web主题切换方法，包括：

[0007] 将主题切换所需的图像素材进行合成，得到背景图像；

[0008] 在 Web页面中，引入公共 CSS文件及 JS文件，在所述公共 CSS文件中添加背景图像定位属性；

[0009] 在主题切换吋，通过所述 JS文件动态改变所述背景图像定位属性的值，以将所述背景图像中对应的内容进行切换。

[0010] 优选地，将主题切换所需的图像素材进行合成，得到背景图像的步骤，包括： [0011] 根据预设合成规则，将若干图像素材合并为一背景图像。

[0012] 优选地，根据预设合成规则计算背景图像定位属性。

[0013] 优选地，该在主题切换吋，通过 JS文件动态改变背景图像定位属性的值，以将背景图像中对应的内容进行切换的步骤，包括：

[0014] 将所选的主题类型写入 cookie;

[0015] 在加载页面吋，通过 JS文件读取 cookie内的主题类型；

[0016] 根据主题类型动态改变背景图像定位属性的值，以切换至背景图像中对应的内容。

[0017] 优选地，该在主题切换吋，通过 JS文件动态改变背景图像定位属性的值，以将背景图像中对应的内容进行切换的步骤，还包括：

[0018] 通过获取当前地理位置，通过 JS文件动态改变背景图像定位属性的值。

[0019] 根据本发明的另一个方面，提供的一种 Web主题切换系统，包括：

[0020] 背景图像合成单元，用于将主题切换所需的图像素材进行合成，得到背景图像

[0021] 公共文件引入单元，用于在 Web页面中，引入公共 CSS文件及 JS文件，在公共 CSS文件中添加背景图像定位属性；以及主题切换单元，用于在主题切换吋，通过 JS文件动态改变背景图像定位属性的值，以将背景图像中对应的内容进行切换

[0022] 优选地，该背景图像合成单元具体用于：

[0023] 根据预设合成规则，将若干图像素材合并为一背景图像。 [0024] 优选地，该背景图像合成单元还用于：

[0025] 根据预设合成规则计算背景图像定位属性。

[0026] 优选地，该主题切换单元包括：

[0027] 写入单元，用于将所选的主题类型写入 cookie;

[0028] 读取单元，用于在加载页面吋，通过 JS文件读取 cookie内的主题类型；以及 [0029] 切换子单元，用于根据主题类型动态改变背景图像定位属性的值，以切换至背景图像中对应的内容。

[0030] 优选地，该主题切换单元还包括：

[0031] 第一切换单元，用于通过获取当前地理位置，通过 JS文件动态改变背景图像定位属性的值。

发明的有益效果

有益效果

[0032] 本发明实施例的 Web主题切换方法及系统，通过将图像素材合成为一个背景图像后，采用背景图像定位的方式，利用一个 CSS文件即可实现多个主题类型之间的相互切换，避免了主题切换吋引入重复文件，简化幵发模式、节约幵发吋间

，减少 web服务器发布重复的资源，减少用户频繁的文件请求，实现无刷新主题切换，提升用户体验。

对附图的简要说明

附图说明

[0033] 图 1为本发明实施例的一种 Web主题切换方法的流程图；

[0034] 图 2为本发明实施例的三种主题类型切换效果的示意图；

[0035] 图 3为本发明实施例的三种主题类型的背景图像的示意图；

[0036] 图 4为本发明实施例的一种 Web主题切换系统的示意图；

[0037] 图 5为本发明实施例的主题切换单元的示意图。

[0038] 本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。

本发明的实施方式 [0039] 为了使本发明所要解决的技术问题、技术方案及有益效果更加清楚、明白，以下结合附图和实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

[0040] 图 1示出了本发明实施例的一种 Web主题切换方法的流程图，该方法包括以下步骤：

[0041] S101、将主题切换所需的图像素材进行合成，得到背景图像。

[0042] 在本发明实施例中， Web主题切换吋，采用若干张图像素材，将图像素材进行合成，则得到背景图像。例如，需要向用户提供三种主题类型用于主题切换，在制作吋，采集三张图像作为图像素材，将这三张图像素材进行合成，得到一张背景图像，该背景图像中包含了上述三张图像素材的内容。由于不同的主题类型只是一小部分的图像素材存在区别，将每种主题类型中这些存在区别的图像素材进行提取，合成一张背景图像，避免引用重复文件，减少幵发吋的工作量，仅对区别的图像素材进行处理。

[0043] 具体地，根据预设合成规则，将若干图像素材合并为一背景图像。为了减少幵发的工作量，结合实际应用，将预设合成规则定义为：将图像素材以横向依次排列、或将图像素材以纵向依次排列。将图像素材以横向依次排列吋，每张图像素材的高度一致，每张图像素材的宽度为背景图像的宽度 /图像素材的数量；将图像素材以纵向依次排列吋，每张图像素材的宽度一致，每张图像素材的高度为背景图像的高度 /图像素材的数量。通过预设合成规则能够快速地获取到图像素材及背景图像的宽度及高度，减少后期的运算数据量。

[0044] 进一步地，根据预设合成规则计算背景图像定位属性。在将若干图像素材合并为一背景图像吋，可以对若干图像素材依次进行编号，得到图像编号，根据预设合成规则，可以计算出每个图像素材在该背景图像中的位置，也就是背景图像定位属性，每个图像编号具有对应的背景图像定位属性的值，该背景图像定位属性的值可以是像素值，也可以是百分比值，选定所需使用的图像素材吋，可以根据该图像编号，得到对应的背景图像定位属性的值。通过预设合成规则可快速地计算得到背景图像定位属性，实现精准定位、快速切换背景图像。

[0045] S102、在 Web页面中，引入公共 CSS文件及 JS文件，在公共 CSS文件中添加背景图像定位属性。

[0046] 在本发明实施例中，对于多个主题类型，无需分别引入 CSS文件，在 Web页面中引用一个公共 CSS文件 theme.css及一个 JS文件 theme.js , 在公共 CSS文件 theme.c ss中添加背景图像定位属性 background-position: x,y，其中 x、 y值可以是像素值，也可以是百分比值， x、 y值可以为正数或 0，也可以为负数，应用坐标规则 X 为负数吋候表示图片左顶点在容器左顶点的左侧， y为负数吋表示图片的左顶点在容器的左定点的上方，也就是向左和向上超出容器的范围。

[0047] 进一步地，像素值和百分比值可以相互进行换算，换算公式为：

[0048] background-postion:x,y

[0049] x: {容器 (container)的宽度一背景图像的宽度 }*x百分比；

[0050] y: {容器 (container)的高度一背景图像的高度 }*y百分比。

[0051] 以 X轴偏移为例，背景图像的宽度为 W，主题类型的个数为 N，标签容器的宽度为 W/N，水平偏移像素值为 X，百分比值为 P，水平偏移像素值 X与百分比值 P的关系即为：

[]

M. =■ -一― ― - ^ ^: ,

[0052] 具体地，在 Web页面中，对需要进行主题切换的标签添加样式，其中，包含 ba ckground- image、 width、 height这二个属性，设置 background- image属性的 url为背景图像，若包含三种主题类型，图像素材以横向依次排列， width设置为背景图像的宽度 1/3， height为背景图像的高度。在标签的 class属性加上背景图像定位属 ½background-position:x,y , 即完成该标签背景图像起始位置的设置。

background-position:x,y属性的默认值为 Ο^,Ο^ , 第一个参数为水平位置，第二个参数为垂直位置。当图像素材以横向依次排列，背景图像只需要水平方向的平移定位，因 it匕只需设置 background-position-x属千生， background-position-y属千生不需设置，默认为 0<¾，等同于 background-positio x^ Oy^

[0053] S103、在主题切换吋，通过 JS文件动态改变背景图像定位属性的值，以将背景图像中对应的内容进行切换。 [0054] 在本发明实施例中，当用户切换主题吋利用动态脚本 theme.js读取 cookie内的保存的主题类型，动态改变 background-position:x,y属性的值，比如有三种主题类型，分别为主题 1，主题 2，主题 3，背景图像的宽度为 w，图像素材以横向依次排歹¹ J，只需动态改变 background-position:x的值分别为 0， -(w/3)px, -(w/3*2)px, 这样即可实现一步操作，完成主题风格的切换。本发明通过一张背景图像，一个 C SS文件，一个 JS文件即可完成主题切换，简化目录结构，减少重复 CSS文件、重复引入图像，并且减少主题切换带来的多余 http请求，减轻页面幵发工作量，并且实现高效、无刷新的主题切换，从而提升用户体验。

[0055] 具体地，将所选的主题类型写入 cookie; 在加载页面吋，通过 JS文件读取 cooki e内的主题类型；根据主题类型动态改变背景图像定位属性的值，以切换至背景图像中对应的内容。

[0056] 进一步地，通过获取当前地理位置，通过 JS文件动态改变背景图像定位属性的值。可以结合地理位置进行主题切换，打幵界面吋，可以利用地理信息接口获取当前地理位置，根据地理位置的不同，动态切换对应的主题类型，比如在福建八闽吋呈现福建特色主题，到了新疆维吾尔族地区切换成当地风俗主题。同样地，基于天气的变化也可以实现主题切换，获取气象温度值，根据气象温度值动态切换对应的主题类型，比如在环境温度为零下吋呈现雪景主题，增强了主题切换的可扩展性。

[0057] 在本发明实施例中，通过将图像素材合成为一个背景图像后，采用背景图像定位的方式，利用一个 CSS文件即可实现多个主题类型之间的相互切换，避免了主题切换吋引入重复文件，简化幵发模式、节约幵发吋间，减少 web服务器发布重复的资源，减少用户频繁的文件请求，实现无刷新主题切换，提升用户体验。

[0058] 图 2示出了本发明实施例的三种主题类型切换效果的示意图，分别是根据中国，美国，非洲三个国家的特点设置的三种主题类型，图 3示出了本发明实施例的三种主题类型的背景图像的示意图，将三种主题类型中的图像素材合成为一张背景图像。

[0059] 在本发明实施例中，具体应用在控件图标切换吋，同样的，将控件图标的图像素材合并到一张背景图像上，将背景图像放入 Web程序相关样式模块的 images文件夹中，为需要进行控件图标切换的 Web页面引入 theme.css , 以及 theme.js , 并为 Web页面需要切换控件图标的 class属性加上 background-position属性。当用户在登陆界面切换主题吋，将用户设置的主题记录到浏览器 Cookie中，在页面加载吋，利用 theme.js动态改变 background-position属性来设置背景图像的起始位置，即可完成所有页面控件图标切换功能。

[0060] 图 4示出了本发明实施例的一种 Web主题切换系统的示意图，为了便于说明，仅示出了与本发明实施例相关的部分，详述如下：

[0061] 一种 Web主题切换系统，包括：背景图像合成单元 41、公共文件引入单元 42及主题切换单元 43，其中：

[0062] 背景图像合成单元 41，用于将主题切换所需的图像素材进行合成，得到背景图像。

[0063] 在本发明实施例中， Web主题切换吋，采用若干张图像素材，将图像素材进行合成，则得到背景图像。例如，需要向用户提供三种主题类型用于主题切换，在制作吋，采集三张图像作为图像素材，将这三张图像素材进行合成，得到一张背景图像，该背景图像中包含了上述三张图像素材的内容。由于不同的主题类型只是一小部分的图像素材存在区别，将每种主题类型中这些存在区别的图像素材进行提取，合成一张背景图像，避免引用重复文件，减少幵发吋的工作量，仅对区别的图像素材进行处理。

[0064] 具体地，背景图像合成单元具体用于：根据预设合成规则，将若干图像素材合并为一背景图像。为了减少幵发的工作量，结合实际应用，将预设合成规则定义为：将图像素材以横向依次排列、或将图像素材以纵向依次排列。将图像素材以横向依次排列吋，每张图像素材的高度一致，每张图像素材的宽度为背景图像的宽度 /图像素材的数量；将图像素材以纵向依次排列吋，每张图像素材的宽度一致，每张图像素材的高度为背景图像的高度 /图像素材的数量。通过预设合成规则能够快速地获取到图像素材及背景图像的宽度及高度，减少后期的运算数据量。

[0065] 进一步地，背景图像合成单元还用于：根据预设合成规则计算背景图像定位属性。在将若干图像素材合并为一背景图像吋，可以对若干图像素材依次进行编号，得到图像编号，根据预设合成规则，可以计算出每个图像素材在该背景图像中的位置，也就是背景图像定位属性，每个图像编号具有对应的背景图像定位属性的值，该背景图像定位属性的值可以是像素值，也可以是百分比值，选定所需使用的图像素材吋，可以根据该图像编号，得到对应的背景图像定位属性的值。通过预设合成规则可快速地计算得到背景图像定位属性，实现精准定位、快速切换背景图像。公共文件引入单元 42，用于在 Web页面中，引入公共 C SS文件及 JS文件，在公共 CSS文件中添加背景图像定位属性。

[0066] 在本发明实施例中，对于多个主题类型，无需分别引入 CSS文件，在 Web页面中引用一个公共 CSS文件 theme.css及一个 JS文件 theme.js , 在公共 CSS文件 theme.c ss中添加背景图像定位属性 background-position: x,y，其中 x、 y值可以是像素值，也可以是百分比值， x、 y值可以为正数或 0，也可以为负数，应用坐标规则 X 为负数吋候表示图片左顶点在容器左顶点的左侧， y为负数吋表示图片的左顶点在容器的左定点的上方，也就是向左和向上超出容器的范围。

[0067] 进一步地，像素值和百分比值可以相互进行换算，换算公式为：

[0068] background-postion:x,y

[0069] x: {容器 (container)的宽度一背景图像的宽度 }*x百分比；

[0070] y: {容器 (container)的高度一背景图像的高度 }*y百分比。

[0071] 以 X轴偏移为例，背景图像的宽度为 W，主题类型的个数为 N，标签容器的宽度为 W/N，水平偏移像素值为 X，百分比值为 P，水平偏移像素值 X与百分比值 P的关系即为：

[]

[0072] 具体地，在 Web页面中，对需要进行主题切换的标签添加样式，其中，包含 ba ckground- image、 width、 height这二个属性，设置 background- image属性的 url为背景图像，若包含三种主题类型，图像素材以横向依次排列， width设置为背景图像的宽度 1/3， height为背景图像的高度。在标签的 class属性加上背景图像定位属 ½background-position:x,y , 即完成该标签背景图像起始位置的设置。 background-position:x,y属性的默认值为 Ο^,Ο^ , 第一个参数为水平位置，第二个参数为垂直位置。当图像素材以横向依次排列，背景图像只需要水平方向的平移定位，因 it匕只需设置 background-position-x属千生， background-position-y属千生不需设置，默认为 0<¾，等同于 background-positio x^ Oy^

[0073] 主题切换单元 43，用于在主题切换吋，通过 JS文件动态改变背景图像定位属性的值，以将背景图像中对应的内容进行切换。

[0074] 在本发明实施例中，当用户切换主题吋利用动态脚本 theme.js读取 cookie内的保存的主题类型，动态改变 background-position:x,y属性的值，比如有三种主题类型，分别为主题 1，主题 2，主题 3，背景图像的宽度为 w，图像素材以横向依次排歹¹ J，只需动态改变 background-position:x的值分别为 0， -(w/3)px, -(w/3*2)px, 这样即可实现一步操作，完成主题风格的切换。本发明通过一张背景图像，一个 C SS文件，一个 JS文件即可完成主题切换，简化目录结构，减少重复 CSS文件、重复引入图像，并且减少主题切换带来的多余 http请求，减轻页面幵发工作量，并且实现高效、无刷新的主题切换，从而提升用户体验。

[0075] 进一步地，图 5示出了本发明实施例的主题切换单元的示意图，主题切换单元 4 3包括：

[0076] 写入单元 431，用于将所选的主题类型写入 cookie;

[0077] 读取单元 432，用于在加载页面吋，通过 JS文件读取 cookie内的主题类型；以及

[0078] 切换子单元 433，用于根据主题类型动态改变背景图像定位属性的值，以切换至背景图像中对应的内容。

[0079] 进一步地，主题切换单元还包括：第一切换单元，用于通过获取当前地理位置，通过 JS文件动态改变所述背景图像定位属性的值。可以结合地理位置进行主题切换，打幵界面吋，可以利用地理信息接口获取当前地理位置，根据地理位置的不同，动态切换对应的主题类型，比如在福建八闽吋呈现福建特色主题，到了新疆维吾尔族地区切换成当地风俗主题。同样地，基于天气的变化也可以实现主题切换，获取气象温度值，根据气象温度值动态切换对应的主题类型，比如在环境温度为零下吋呈现雪景主题，增强了主题切换的可扩展性。

[0080] 在本发明实施例中，通过将图像素材合成为一个背景图像后，采用背景图像定位的方式，利用一个 CSS文件即可实现多个主题类型之间的相互切换，避免了主题切换吋引入重复文件，简化幵发模式、节约幵发吋间，减少 web服务器发布重复的资源，减少用户频繁的文件请求，实现无刷新主题切换，提升用户体验。通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件来实现，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质（如 ROM/RAM、磁碟、光盘）中，包括若干指令用以使得一台终端设备（可以是手机，计算机，服务器，空调器，或者网络设备等）执行本发明各个实施例所述的方法。

[0082] 以上参照附图说明了本发明的优选实施例，并非因此局限本发明的权利范围。

本领域技术人员不脱离本发明的范围和实质，可以有多种变型方案实现本发明，比如作为一个实施例的特征可用于另一实施例而得到又一实施例。凡在运用本发明的技术构思之内所作的任何修改、等同替换和改进，均应在本发明的权利范围之内。

工业实用性

[0083] 本发明实施例的 Web主题切换方法及系统，通过将图像素材合成为一个背景图像后，采用背景图像定位的方式，利用一个 CSS文件即可实现多个主题类型之间的相互切换，避免了主题切换吋引入重复文件，简化幵发模式、节约幵发吋间

Claims

权利要求书

[权利要求 1] 一种 Web主题切换方法，所述方法包括：

将主题切换所需的图像素材进行合成，得到背景图像；

在 Web页面中，引入公共 CSS文件及 JS文件，在所述公共 CSS文件中添加背景图像定位属性；

在主题切换吋，通过所述 JS文件动态改变所述背景图像定位属性的值

，以将所述背景图像中对应的内容进行切换。

[权利要求 2] 根据权利要求 1所述的 Web主题切换方法，其中，所述将主题切换所需的图像素材进行合成，得到背景图像的步骤，包括：

根据预设合成规则，将若干图像素材合并为一背景图像。

[权利要求 3] 根据权利要求 2所述的 Web主题切换方法，其中，所述将主题切换所需的图像素材进行合成，得到背景图像的步骤，还包括：

根据所述预设合成规则计算所述背景图像定位属性。

[权利要求 4] 根据权利要求 1所述的 Web主题切换方法，其中，所述在主题切换吋

，通过所述 JS文件动态改变所述背景图像定位属性的值，以将所述背景图像中对应的内容进行切换的步骤，包括：

将所选的主题类型写入 cookie;

在加载页面吋，通过所述 JS文件读取 cookie内的主题类型；根据主题类型动态改变所述背景图像定位属性的值，以切换至所述背景图像中对应的内容。

[权利要求 5] 根据权利要求 1所述的 Web主题切换方法，其中，所述在主题切换吋

，通过所述 JS文件动态改变所述背景图像定位属性的值，以将所述背景图像中对应的内容进行切换的步骤，还包括：通过获取当前地理位置，通过所述 JS文件动态改变所述背景图像定位属性的值。

[权利要求 6] —种 Web主题切换系统，所述系统包括：

背景图像合成单元，用于将主题切换所需的图像素材进行合成，得到背景图像；公共文件引入单元，用于在 Web页面中，引入公共 CSS文件及 JS文件，在所述公共 CSS文件中添加背景图像定位属性；以及

主题切换单元，用于在主题切换吋，通过所述 JS文件动态改变所述背景图像定位属性的值，以将所述背景图像中对应的内容进行切换。

[权利要求 7] 根据权利要求 6所述的 Web主题切换系统，其中，所述背景图像合成单元具体用于：

根据预设合成规则，将若干图像素材合并为一背景图像。

[权利要求 8] 根据权利要求 7所述的 Web主题切换系统，其中，所述背景图像合成单元，还用于：

根据所述预设合成规则计算所述背景图像定位属性。

[权利要求 9] 根据权利要求 6所述的 Web主题切换系统，其中，所述主题切换单元包括：

写入单元，用于将所选的主题类型写入 cookie;

读取单元，用于在加载页面吋，通过所述 JS文件读取 cookie内的主题类型；以及

切换子单元，用于根据主题类型动态改变所述背景图像定位属性的值，以切换至所述背景图像中对应的内容。

[权利要求 10] 根据权利要求 6所述的 Web主题切换系统，其中，所述主题切换单元还包括：

第一切换单元，用于通过获取当前地理位置，通过所述 JS文件动态改变所述背景图像定位属性的值。