CN111859217A - 一种web应用转场效果实现方法 - Google Patents
一种web应用转场效果实现方法 Download PDFInfo
- Publication number
- CN111859217A CN111859217A CN202010702685.XA CN202010702685A CN111859217A CN 111859217 A CN111859217 A CN 111859217A CN 202010702685 A CN202010702685 A CN 202010702685A CN 111859217 A CN111859217 A CN 111859217A
- Authority
- CN
- China
- Prior art keywords
- displayed
- transition
- picture
- transition effect
- content
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 230000007704 transition Effects 0.000 title claims abstract description 59
- 230000000694 effects Effects 0.000 title claims abstract description 39
- 238000000034 method Methods 0.000 title claims abstract description 21
- 238000012544 monitoring process Methods 0.000 claims description 9
- 230000006870 function Effects 0.000 claims description 8
- 230000008859 change Effects 0.000 claims description 3
- 230000004048 modification Effects 0.000 claims description 3
- 238000012986 modification Methods 0.000 claims description 3
- 230000008569 process Effects 0.000 claims description 3
- 238000013467 fragmentation Methods 0.000 description 1
- 238000006062 fragmentation reaction Methods 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
- G06F16/972—Access to data in other repository systems, e.g. legacy data or dynamic Web page generation
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本发明提供一种WEB应用转场效果实现方法，属于WEB应用技术领域，本发明在用户登录时，用图片+文字的形式展示每日宣贯之类的内容，用户点击登录按钮会直接进入转场界面，首先展示转场效果图片，系统加载完成后再打开系统首页。有效提升用户体验，在网络加载慢时缓冲用户的等待时间，提高用户体验度。
Description
技术领域
本发明涉及WEB应用技术，尤其涉及一种WEB应用转场效果实现方法。
背景技术
目前系统登录普遍都是直接进入系统首页，或者用个GIF缓冲图片过渡。比较单一，并且没有充分利用好系统登录时的加载时间，需要提前传输给用户的信息只能放于登录界面或系统首页。而且在网络加载慢时，用户的体验度不好。
发明内容
为了解决以上技术问题，本发明提供了一种基于前端脚本语言(JavaScript、jQuery)的WEB应用转场效果实现方法，丰富了系统登录功能，充分利用系统登录间隙，进行政策、制度的宣贯。有效提升用户体验，在网络加载慢时缓冲用户的等待时间，提高用户体验度。
本发明的技术方案是：
一种WEB应用转场效果实现方法，
在用户登录时，用图片+文字的形式展示每日宣贯之类的内容，用户点击登录按钮会直接进入转场界面，首先展示转场效果图片，系统加载完成后再打开系统首页。
进一步的，
包括转场、展示查询、管理三个方面；
其中，
所述转场包括：
登录页面：更改登录请求地址为转场页面请求地址，请求之前首先通过ajax 请求查询需要展示的转场效果图片信息，并加上所有登录信息放于请求中传递给转场页面；
转场页面：进入转场页面时，首先获取转场效果图片信息并展示；接收到的登录信息放于Form表单中，设置当前Form表单请求地址为登录地址，并通过 target属性使请求在iframe中打开；
展示时间：添加监听事件，监听iframe中的页面是否加载完成，通过监听自动调整转场效果的展示时间。
所述展示查询包括：
用户验证：登录页面提交之前，都需要先去查询转场效果图片信息；在后台处理查询逻辑之前，先判断当前用户的登录信息是否正确，通过再进行下一步查询；
查询逻辑：配置信息都存储于数据库中。
所述查询过程如下：
1)判断展示开关是否为打开状态，打开则执行步骤“②”；
2)获取标记为当天展示的内容，如果为多个则随机选择一个。确定当天展示内容时，对其添加标记，方便下次查询直接获取。当获取内容为空时执行步骤“③”；
3)获取未展示的所有内容集合，数量小于1时，执行步骤“④”；大于等于 1时，则在未展示的内容集合中随机获取其中一条，并标记为当天展示；
4)因为都已经展示过，更改所有数据状态为“未展示”；同时获取排序后的第一条为当天需要展示的内容并标记；
5)最后组装所有获取到的信息并返回给前台。
所述管理包括：
总体设置：可以设置是否打开转场效果，设定转场效果图片展示的基础时间；
图片上传：选择一张本地图片上传，添加到转场效果循环列表中；
展示列表：通过描述与展示日期进行查询。
列表采用分页展示所有转场效果图片，每页展示6张图片；并提供四种展示规格，可切换列表展示的图片大小。
进一步的，
设以下三个基本功能：
状态更改：切换图片是否展示过，未展示过的图片会在下次的循环列表中，直至所有图片都展示一遍；
指定日期：可指定图片在具体哪一天展示，到了指定日期会优先展示该图片；
修改描述：可修改图片的描述信息。
本发明的有益效果是
丰富系统登录功能，利用系统碎片化时间进行宣贯学习，也有效提高出现网络加载慢时的用户体验。转场效果是可设置的，可指定已经上传的图片在某一天展示，未指定时则根据策略随机选择一张图片展示。并且转场效果的图片和文字是分离的，可只更改背景图或者显示的文字内容。
具体实施方式
为使本发明实施例的目的、技术方案和优点更加清楚，下面将对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例，基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本发明保护的范围。
目前WEB应用登录加载方式普遍只是一个进度条或者GIF动画，效果单一，加上用户在这段时间是一直等待的。针对这个问题，我们提出了转场这个功能，在用户登录时，用图片+文字的形式展示每日宣贯之类的内容。这样不仅丰富了系统登录功能，还达到了“每日学习”的效果。
本发明公开了一种WEB应用转场效果实现方法。用户点击登录按钮会直接进入转场界面，首先展示转场效果图片，系统加载完成后再打开系统首页。以下通过转场模块、展示查询、管理模块三个方面介绍具体实施细节。
转场模块：
·登录页面：更改登录请求地址为转场页面请求地址，请求之前首先通过ajax 请求查询需要展示的转场效果图片信息，并加上所有登录信息放于请求中传递给转场页面。
·转场页面：进入转场页面时，首先获取转场效果图片信息并展示。接收到的登录信息放于Form表单中，设置当前Form表单请求地址为登录地址，并通过target属性使请求在iframe中打开。
·展示时间：添加监听事件，监听iframe中的页面是否加载完成，通过监听自动调整转场效果的展示时间。
展示查询：
·用户验证：登录页面提交之前，都需要先去查询转场效果图片信息。在后台处理查询逻辑之前，先判断当前用户的登录信息是否正确，通过再进行下一步查询。
·查询逻辑：配置信息都存储于数据库中，查询过程如下：
①判断展示开关是否为打开状态，打开则执行步骤“②”。
②获取标记为当天展示的内容，如果为多个则随机选择一个。确定当天展示内容时，对其添加标记，方便下次查询直接获取。当获取内容为空时执行步骤“③”。
③获取未展示的所有内容集合，数量小于1时，执行步骤“④”。大于等于1时，则在未展示的内容集合中随机获取其中一条，并标记为当天展示。
④因为都已经展示过，更改所有数据状态为“未展示”。同时获取排序后的第一条为当天需要展示的内容并标记。
⑤最后组装所有获取到的信息并返回给前台。
管理模块：
·总体设置：可以设置是否打开转场效果，设定转场效果图片展示的基础时间。
·图片上传：选择一张本地图片上传，添加到转场效果循环列表中。
·展示列表：可以通过描述与展示日期进行查询。列表采用分页展示所有转场效果图片，每页展示6张图片。并提供四种展示规格，可切换列表展示的图片大小。
·基本功能：主要有以下三个基本功能：
①状态更改：切换图片是否展示过，未展示过的图片会在下次的循环列表中，直至所有图片都展示一遍。
②指定日期：可指定图片在具体哪一天展示，到了指定日期会优先展示该图片。
③修改描述：可以修改图片的描述信息。
以上所述仅为本发明的较佳实施例，仅用于说明本发明的技术方案，并非用于限定本发明的保护范围。凡在本发明的精神和原则之内所做的任何修改、等同替换、改进等，均包含在本发明的保护范围内。
Claims (8)
1.一种WEB应用转场效果实现方法，其特征在于，
在用户登录时，用图片+文字的形式展示每日宣贯之类的内容，用户点击登录按钮会直接进入转场界面，首先展示转场效果图片，系统加载完成后再打开系统首页。
2.根据权利要求1所述的方法，其特征在于，
包括转场、展示查询、管理三个方面。
3.根据权利要求2所述的方法，其特征在于，
所述转场包括：
登录页面：更改登录请求地址为转场页面请求地址，请求之前首先通过ajax请求查询需要展示的转场效果图片信息，并加上所有登录信息放于请求中传递给转场页面；
转场页面：进入转场页面时，首先获取转场效果图片信息并展示；接收到的登录信息放于Form表单中，设置当前Form表单请求地址为登录地址，并通过target属性使请求在iframe中打开；
展示时间：添加监听事件，监听iframe中的页面是否加载完成，通过监听自动调整转场效果的展示时间。
4.根据权利要求2所述的方法，其特征在于，
所述展示查询包括：
用户验证：登录页面提交之前，都需要先去查询转场效果图片信息；在后台处理查询逻辑之前，先判断当前用户的登录信息是否正确，通过再进行下一步查询；
查询逻辑：配置信息都存储于数据库中。
5.根据权利要求4所述的方法，其特征在于，
所述查询过程如下：
1)判断展示开关是否为打开状态，打开则执行步骤“②”；
2)获取标记为当天展示的内容，如果为多个则随机选择一个。确定当天展示内容时，对其添加标记，方便下次查询直接获取。当获取内容为空时执行步骤“③”；
3)获取未展示的所有内容集合，数量小于1时，执行步骤“④”；大于等于1时，则在未展示的内容集合中随机获取其中一条，并标记为当天展示；
4)因为都已经展示过，更改所有数据状态为“未展示”；同时获取排序后的第一条为当天需要展示的内容并标记；
5)最后组装所有获取到的信息并返回给前台。
6.根据权利要求1所述的方法，其特征在于，
所述管理包括：
总体设置：可以设置是否打开转场效果，设定转场效果图片展示的基础时间；
图片上传：选择一张本地图片上传，添加到转场效果循环列表中；
展示列表：通过描述与展示日期进行查询。
7.根据权利要求6所述的方法，其特征在于，
列表采用分页展示所有转场效果图片，每页展示6张图片；并提供四种展示规格，可切换列表展示的图片大小。
8.根据权利要求1所述的方法，其特征在于，
设以下三个基本功能：
状态更改：切换图片是否展示过，未展示过的图片会在下次的循环列表中，直至所有图片都展示一遍；
指定日期：可指定图片在具体哪一天展示，到了指定日期会优先展示该图片；
修改描述：可修改图片的描述信息。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010702685.XA CN111859217A (zh) | 2020-07-21 | 2020-07-21 | 一种web应用转场效果实现方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010702685.XA CN111859217A (zh) | 2020-07-21 | 2020-07-21 | 一种web应用转场效果实现方法 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN111859217A true CN111859217A (zh) | 2020-10-30 |
Family
ID=73002241
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010702685.XA Pending CN111859217A (zh) | 2020-07-21 | 2020-07-21 | 一种web应用转场效果实现方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111859217A (zh) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112989249A (zh) * | 2021-02-19 | 2021-06-18 | 北京皮尔布莱尼软件有限公司 | 一种页面显示方法、计算设备及存储介质 |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104462567A (zh) * | 2014-12-26 | 2015-03-25 | 北京奇虎科技有限公司 | web页面的切换方法和装置及综合页面提供装置 |
| CN105843646A (zh) * | 2016-03-25 | 2016-08-10 | 百度在线网络技术（北京）有限公司 | 启动应用的方法、装置和电子设备 |
| CN111222065A (zh) * | 2019-12-30 | 2020-06-02 | 瑞庭网络技术（上海）有限公司 | 一种信息展示方法、装置、电子设备及介质 |
| CN111260397A (zh) * | 2020-01-13 | 2020-06-09 | 上海博泰悦臻网络技术服务有限公司 | 应用广告管理方法及系统 |
-
2020
- 2020-07-21 CN CN202010702685.XA patent/CN111859217A/zh active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104462567A (zh) * | 2014-12-26 | 2015-03-25 | 北京奇虎科技有限公司 | web页面的切换方法和装置及综合页面提供装置 |
| CN105843646A (zh) * | 2016-03-25 | 2016-08-10 | 百度在线网络技术（北京）有限公司 | 启动应用的方法、装置和电子设备 |
| CN111222065A (zh) * | 2019-12-30 | 2020-06-02 | 瑞庭网络技术（上海）有限公司 | 一种信息展示方法、装置、电子设备及介质 |
| CN111260397A (zh) * | 2020-01-13 | 2020-06-09 | 上海博泰悦臻网络技术服务有限公司 | 应用广告管理方法及系统 |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112989249A (zh) * | 2021-02-19 | 2021-06-18 | 北京皮尔布莱尼软件有限公司 | 一种页面显示方法、计算设备及存储介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US8510096B2 (en) | Method and device for selecting interface language of software | |
| CN106886570A (zh) | 页面处理方法及装置 | |
| CN102622444B (zh) | 一种xml报文处理方法和装置 | |
| CN107172205A (zh) | 推送信息处理方法、移动终端及计算机存储介质 | |
| CN103164404A (zh) | 一种搜索结果的显示方法和设备 | |
| GB2443950A (en) | System and method for updating content in a mobile terminal | |
| CN106951536A (zh) | 数据转化方法及系统 | |
| CN105630992B (zh) | 静态页面中的场景显示方法及装置 | |
| CN105162676A (zh) | 一种微信数据获取方法和系统 | |
| CN110069688A (zh) | 反爬虫的页面展示方法、服务器、存储介质及装置 | |
| CN111859217A (zh) | 一种web应用转场效果实现方法 | |
| CN110096276A (zh) | 房源展示页面配置方法、设备、存储介质及装置 | |
| CN108681910A (zh) | 基于网络结构的追溯方法、装置、终端设备及存储介质 | |
| US20220030037A1 (en) | Session data processing method and apparatus, user terminal, and storage medium | |
| JP2007052731A (ja) | 検索装置及び検索プログラム | |
| CN110287460B (zh) | 电子书的展示方法、计算设备及计算机存储介质 | |
| CN105808628B (zh) | 网页转码方法、装置及系统 | |
| CN111111178B (zh) | 一种游戏公告的获取方法、装置、设备及存储介质 | |
| CN109254812A (zh) | 一种更新标签页的方法、系统、终端及服务器 | |
| CN112100187B (zh) | 一种基于VueJS的学生学习数据存储方法及装置 | |
| CN109376216A (zh) | 一种用于教育系统的题目标签管理的实现方法及装置 | |
| CN112632973A (zh) | 一种文本处理的方法、装置、设备及存储介质 | |
| WO2020012595A1 (ja) | 情報処理装置、情報処理方法、プログラム、記憶媒体 | |
| CN111159602A (zh) | 网址页面快速访问方法、装置及存储介质 | |
| CN106612358A (zh) | 一种终端和设置联系人头像的方法 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20201030 |
|
| RJ01 | Rejection of invention patent application after publication |