CN112579940A - 一种可视化大屏接入视频会议界面的方法 - Google Patents

Abstract

本发明公开了一种可视化大屏接入视频会议界面的方法，该方法包括：根据页面布局进行分析，判断会议模式所需的缩放比例；根据会议模式变化区间包裹一层div元素，添加id进行会议模式页面切换；创建会议事件，通过JavaScript脚本语言包裹会议模式变化区间的div元素；基于CSS3样式表文件，通过给div元素添加父元素，获取会议模式下的显示效果；判断存储记录是否为会议模式，运行打开页面为展示网页样式表。本发明的有益效果：本申请基于javaScript运行在浏览器上的脚本语言，采用可视化大屏，使用放置在脚本文件中的CSS3中的不同模块，实现一套代码在不同的模块之间灵活切换，生成的目标模块不影响页面内容的完整展示，同时简化开发代码量，提高了前端开发的工作效率。

Description

一种可视化大屏接入视频会议界面的方法

技术领域

本发明涉及计算机前端开发技术领域，具体来说，涉及一种可视化大屏接入视频会议界面的方法。

背景技术

CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、语言模块、背景和边框、文字特效、多栏布局等模块。

ECMAScript是一种由Ecma国际，通过ECMA-262标准化的脚本程序设计语言，这种语言在万维网上应用广泛，它往往被称为JavaScript或JSscript，所以它可以理解为是JavaScript的一个标准,但实际上后两者是ECMA-262标准的实现和扩展。

运用CSS3和javaScript技术解决大屏展示中的不同场景的应用。

发明内容

针对相关技术中的上述技术问题，本发明提出一种可视化大屏接入视频会议界面的方法，能够解决在固定宽高的大数据可视化展示屏幕上，嵌入视频会议等会议窗口，且在内容及布局上不影响原有展示效果。

为实现上述技术目的，本发明的技术方案是这样实现的：一种可视化大屏接入视频会议界面的方法，该方法包含以下步骤：

S1 根据页面布局进行分析，判断会议模式所需的缩放比例；

S2 根据会议模式变化区间包裹一层div元素，添加id进行会议模式页面切换；

S3创建会议事件，通过JavaScript脚本语言包裹会议模式变化区间的div元素；

S4 基于CSS3样式表文件，通过给div元素添加父元素，获取会议模式下的显示效果；

S5 判断存储记录是否为会议模式，运行打开页面为展示网页样式表。

进一步地，所述S1中页面布局进一步包含：

S1.1基于原始尺寸页面，分析会议模式启动或关闭，若会议模式启动状态，则记录会议模式布局；

S1.2分析会议模式为关闭状态，则记录原始页面布局；

S1.3 根据会议模式布局，确定会议模式比例和原始页面布局固定尺寸。

进一步地，所述S2中会议模式变化区间进一步包含：

S2.1 基于div元素设置分类定义CSS3样式，相同的类设置相同样式表，不同的类设置不同的样式表；

S2.2 添加id创建按钮标签，并进行会议模式的页面大小切换。

进一步地，所述S3中会议事件进一步包含：

S3.1 会议事件生成会议按钮，点击会议按钮后，通过JavaScript脚本语言添加active类名。

进一步地，所述S4中CSS3样式表进一步包含:

S4.1通过盒子模型对CSS3元素的宽度和高度的属性空间放置，所述属性为边距、边框、填充和实际内容；

S4.2列表模块，根据模块定义的元素，使用不同类型的列表结构；

S4.3语言模块，CSS3语言中的元素选择器分别由基本选择器、层次选择器、伪类选择器、伪元素选择器和属性选择器；

S4.4背景和边框，利用CSS3中边框样式对某个角对背景图片做偏移定位，从而得到了增强后的背景图片；

S4.5文字特效、根据自定义文字和颜色，在线演示源码下载的发光文字和文字投影；

S4.6多栏布局等模块，在线浏览器支持源码下的一栏文字或多栏文字的混合排版。

进一步地，所述S4.3基本选择器进一步包含：

S4.3.1 通配符选择器在新建静态页面下，使用通配符使用；

S4.3.2 id选择器根据属性值的元素配置元素样式；

S4.3.3 类选择器根据指定的class属性值来定义选择器；

S4.3.4 元素选择器和多元素选择器在不同的元素之间进行分割。

进一步地，所述S5本地存储记录的会议模式进一步包含：

S5.1 CSS3 3D会议模式展示区，输出的展示页面样式表为同步的多任务处理，其中多任务包含，制作多背景、控制背景图像尺寸、给每个列表项添加过度动画效果、悬浮状态改变每个列表项、设置列表项图片和圆角、设置底层的显示文本及层级的渐变效果、去除图片阴影效果。

本发明的有益效果：鉴于现有技术中存在的不足，本申请基于javaScript运行在浏览器上的脚本语言，采用可视化大屏，使用放置在脚本文件中的CSS3中的不同模块，实现一套代码在不同的模块之间灵活切换，生成的目标模块不影响页面内容的完整展示，同时简化开发代码量，提高了前端开发的工作效率。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是根据本发明实施例所述的可视化大屏接入视频会议界面的方法流程框图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员所获得的所有其他实施例，都属于本发明保护的范围。

如图1所示，根据本发明实施例所述的可视化大屏接入视频会议界面的方法，运用CSS3和javaScript技术解决大屏展示中的不同场景的应用，实现固定宽高的大数据可视化展示在屏幕上，嵌入视频会议模式等会议窗口；

在本发明的一个具体实施例中，

步骤一、根据页面布局进行分析，判断会议模式所需的缩放比例，其中，基于原始尺寸页面，分析会议模式是启动状态或者关闭状态，若会议模式启动状态，则记录会议模式布局；分析会议模式为关闭状态，则记录原始页面布局；根据会议模式布局，确定会议模式比例和原始页面布局固定尺寸。

在本发明的一个具体实施例中，

步骤二、根据会议模式变化区间包裹一层div元素，添加id进行会议模式页面切换，其中，基于div元素设置分类定义CSS3样式，相同的类设置相同样式表，不同的类设置不同的样式表；添加id创建按钮标签，并进行会议模式的页面大小切换。

在本发明的一个具体实施例中，

步骤三、创建会议事件，通过JavaScript脚本语言包裹会议模式变化区间的div元素，会议事件生成会议按钮，点击会议按钮后，通过JavaScript脚本语言添加active类名。

在本发明的一个具体实施例中，

步骤四、基于CSS3样式表文件，通过给div元素添加父元素，获取会议模式下的显示效果，通过盒子模型对CSS3元素的宽度和高度的属性空间放置，所述属性为边距、边框、填充和实际内容，其中，列表模块，根据模块定义的元素，使用不同类型的列表结构，语言模块，CSS3语言中的元素选择器分别由基本选择器、层次选择器、伪类选择器、伪元素选择器和属性选择器；背景和边框，利用CSS3中边框样式对某个角对背景图片做偏移定位，从而得到了增强后的背景图片，文字特效、根据自定义文字和颜色，在线演示源码下载的发光文字和文字投影，多栏布局等模块，在线浏览器支持源码下的一栏文字或多栏文字的混合排版，所述基本选择器进一步包含：通配符选择器在新建静态页面下，使用通配符使用；id选择器根据属性值的元素配置元素样式；类选择器根据指定的class属性值来定义选择器；元素选择器和多元素选择器在不同的元素之间进行分割。

在本发明的一个具体实施例中，

步骤五、判断存储记录是否为会议模式，运行打开页面为展示网页样式表，其中，CSS3 3D会议模式展示区，输出的展示页面样式表为同步的多任务处理，其中多任务包含，制作多背景、控制背景图像尺寸、给每个列表项添加过度动画效果、悬浮状态改变每个列表项、设置列表项图片和圆角、设置底层的显示文本及层级的渐变效果、去除图片阴影效果。

为了方便理解本发明的上述技术方案，以下通过具体使用方式上对本发明的上述技术方案进行详细说明。

在具体使用时，根据本发明所述的可视化大屏接入视频会议界面的方法，首先，根据页面布局进行分析，判断会议模式所需的缩放比例，基于原始尺寸页面；

然后，根据会议模式变化区间包裹一层div元素，添加id进行会议模式页面切换；

其次，创建会议事件，通过JavaScript脚本语言包裹会议模式变化区间的div元素，其中会议事件生成会议按钮源码为：

$（＇#huiyi）.on(＇click＇,function(){

$（＇#scaleBg＇）.toggleClass（＇active＇）；

if（$（＇#scaleBg＇）.hasClass （＇active＇）

localstorage.setItem（＇ishuiyi＇）,yes＇)

}else{

localstorage.setItem（＇ishuiyi＇）,true)

}

try {

myChart.resize、（）；

}catch(e) {

}

try {

window.1Chart2.resize（）；

}catch(e) {

}。

然后，基于CSS3样式表文件，通过给div元素添加父元素，获取会议模式下的显示效果，通过盒子模型对CSS3元素的宽度和高度的属性空间放置，所述属性为边距、边框、填充和实际内容；

最后，判断存储记录是否为会议模式，运行打开页面为展示网页样式表。

综上所述，借助于本发明的上述技术方案，采用可视化大屏，使用放置在脚本文件中的CSS3中的不同模块，实现一套代码在不同的模块之间灵活切换，生成的目标模块不影响页面内容的完整展示，同时简化开发代码量，提高了前端开发的工作效率。

以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (7)

1.一种可视化大屏接入视频会议界面的方法，其特征在于，该方法包括以下步骤：

S1 根据页面布局进行分析，判断会议模式所需的缩放比例；

S2 根据会议模式变化区间包裹一层div元素，添加id进行会议模式页面切换；

S3创建会议事件，通过JavaScript脚本语言包裹会议模式变化区间的div元素；

S4 基于CSS3样式表文件，通过给div元素添加父元素，获取会议模式下的显示效果；

S5 判断存储记录是否为会议模式，运行打开页面为展示网页样式表。

2.根据权利要求1所述的可视化大屏接入视频会议界面的方法，其特征在于，所述S1中页面布局进一步包含：

S1.1基于原始尺寸页面，分析会议模式启动或关闭，若会议模式启动状态，则记录会议模式布局；

S1.2分析会议模式为关闭状态，则记录原始页面布局；

S1.3 根据会议模式布局，确定会议模式比例和原始页面布局固定尺寸。

3.根据权利要求1所述的可视化大屏接入视频会议界面的方法，其特征在于，所述S2中会议模式变化区间进一步包含：

S2.1 基于div元素设置分类定义CSS3样式，相同的类设置相同样式表，不同的类设置不同的样式表；

S2.2 添加id创建按钮标签，并进行会议模式的页面大小切换。

4.根据权利要求1所述的可视化大屏接入视频会议界面的方法，其特征在于，所述S3中会议事件进一步包含：

S3.1 会议事件生成会议按钮，点击会议按钮后，通过JavaScript脚本语言添加active类名。

5.根据权利要求1所述的可视化大屏接入视频会议界面的方法，其特征在于，所述S4中CSS3样式表进一步包含:

S4.1通过盒子模型对CSS3元素的宽度和高度的属性空间放置，所述属性为边距、边框、填充和实际内容；

S4.2列表模块，根据模块定义的元素，使用不同类型的列表结构；

S4.3语言模块，CSS3语言中的元素选择器分别由基本选择器、层次选择器、伪类选择器、伪元素选择器和属性选择器；

S4.4背景和边框，利用CSS3中边框样式对某个角对背景图片做偏移定位，从而得到了增强后的背景图片；

S4.5文字特效、根据自定义文字和颜色，在线演示源码下载的发光文字和文字投影；

S4.6多栏布局等模块，在线浏览器支持源码下的一栏文字或多栏文字的混合排版。

6.根据权利要求5所述的可视化大屏接入视频会议界面的方法，其特征在于，所述S4.3基本选择器进一步包含：

S4.3.1 通配符选择器在新建静态页面下，使用通配符使用；

S4.3.2 id选择器根据属性值的元素配置元素样式；

S4.3.3 类选择器根据指定的class属性值来定义选择器；

S4.3.4 元素选择器和多元素选择器在不同的元素之间进行分割。

7.根据权利要求1所述的可视化大屏接入视频会议界面的方法，其特征在于，所述S5本地存储记录的会议模式进一步包含：

S5.1 CSS3 3D会议模式展示区，输出的展示页面样式表为同步的多任务处理，其中多任务包含，制作多背景、控制背景图像尺寸、给每个列表项添加过度动画效果、悬浮状态改变每个列表项、设置列表项图片和圆角、设置底层的显示文本及层级的渐变效果、去除图片阴影效果。

Images