CN110308805A - 适用于移动终端的hover显示方法 - Google Patents
适用于移动终端的hover显示方法 Download PDFInfo
- Publication number
- CN110308805A CN110308805A CN201910487876.6A CN201910487876A CN110308805A CN 110308805 A CN110308805 A CN 110308805A CN 201910487876 A CN201910487876 A CN 201910487876A CN 110308805 A CN110308805 A CN 110308805A
- Authority
- CN
- China
- Prior art keywords
- touch
- event
- mobile terminal
- display methods
- mouse
- 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.)
- Withdrawn
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/03—Arrangements for converting the position or the displacement of a member into a coded form
- G06F3/033—Pointing devices displaced or positioned by the user, e.g. mice, trackballs, pens or joysticks; Accessories therefor
- G06F3/0354—Pointing devices displaced or positioned by the user, e.g. mice, trackballs, pens or joysticks; Accessories therefor with detection of 2D relative movements between the device, or an operating part thereof, and a plane or surface, e.g. 2D mice, trackballs, pens or pucks
- G06F3/03543—Mice or pucks
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/03—Arrangements for converting the position or the displacement of a member into a coded form
- G06F3/033—Pointing devices displaced or positioned by the user, e.g. mice, trackballs, pens or joysticks; Accessories therefor
- G06F3/038—Control and interface arrangements therefor, e.g. drivers or device-embedded control circuitry
- G06F3/0383—Signal control means within the pointing device
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
- G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
- G06F3/04883—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures for inputting data by handwriting, e.g. gesture or text
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Abstract
本发明公开一种适用于移动终端的hover显示方法,包括以下几个步骤:S1:用户数据采集模块;S2:视频节目鉴别能力计算和排序模块;S3:VideoBag打包模块;S4:权重计算模块;S5:用户特征表生成模块;S6:广告投放模块。本发明通过海量的基础用户数据,结合大数据和机器学习技术,提高了汽车营销领域的转化率和精准率,同时提高了用户体验,降低了用户反感度。
Description
技术领域
本发明涉及多媒体显示应用技术领域,特别涉及一种适用于移动终端的hover显示方法。
背景技术
CSS伪类的hover在移动端一直是个难题,PC端鼠标光标永远会停留在屏幕上,而移动端手指离开屏幕无法被检测到,这导致在移动端应用了hover伪类的元素无法实现跟PC端一样的“点击-弹起”效果,造成用户体验的缺失。目前有一些主流库采用active模拟,但是active除了有ios和android的兼容问题,对于嵌套的元素active也带来了“穿透现象”,如果父元素和子元素同时设置了active或hover,在点击子元素时父元素也会出现被点击的视觉效果。本专利提出一种通用的解决移动端的hover交互效果缺失的问题。
发明内容
本发明要解决的技术问题是提供一种适用于移动终端的hover显示方法,能够移动端的hover交互效果缺失的问题。
为了解决上述技术问题,本发明的技术方案为:
一种适用于移动终端的hover显示方法,包括以下几个步骤:
S1:基于组件技术构建一种通用组件,在组件底层通过JavaScript判断当前环境是属于可触摸环境还是不可触摸环境;
S2:对于可触摸环境:利用标准的Touch事件模型,实现模拟算法完整模拟移动端的表达hover效果;
S3:对于不可触摸环境:利用标准的Mouse事件模型,实现模拟算法完整模拟鼠标来表达hover效果;
S4:对于穿透现象,通过阻止流程传播的方式解决。
优选的,所述用特定字符对html模板所需渲染部分对应的数据进行标识,并将该html模板及标识所需渲染部分对应的数据均以变量的形式传入引擎解析模块中。
优选的,所述引擎解析模块使用JavaScript语言的正则表达式对传入的html模板及标识所需渲染部分对应的数据进行匹配,匹配出传入html模板变量及所需渲染部分对应的数据变量,并将其组装成html代码形式返回前端。
优选的,所述对于不同的业务类型,需要的HTML模板是不同的,针对不同的业务类型,在HTML模板中添加不同的数据类型的属性。
优选的,所述Touch事件模型的建立为了简化对单个和多个触摸事件的识别,特定窗口内的每一个视图都可以被配置成多点触摸视图或是单点触摸视图,每一个视图都可以被配置成独占或是非独占视图,根据视图的配置,可以忽略或是识别该视图以及其他视图中的触摸事件。
优选的,所述经过处理的触摸输入数据可以被称为一个或多个触摸事件,并且可以采用由多点触摸面板产生的原始触摸数据更易于处理的格式,每一个触摸事件都可以包括当前正发生触摸处的一组坐标。
优选的,所述获取来自触摸敏感设备的一个或多个触摸输入信号,基于触摸输入信号确定两个或多个触摸事件,其中该触摸事件和在触摸敏感设备上显示的web页面中的两个或更多个区域相关联的触摸输入信号相关联,以及通过编程接口提供对至少一个触摸事件的访问。
优选的,所述存储触摸手势模型和鼠标事件之间映射模型的映射存储单元,用于获取触摸手势的手势输入单元和触摸手势从映射模型获取对应鼠标事件的控制单元和用于发送鼠标事件的鼠标事件发送单元,所述控制单元分别与映射存储单元、手势输入单元和鼠标事件发送单元相连。
优选的,所述在触摸点数查找映射模型数据从而得到鼠标事件中的按键事件,通过设置阈值时间,实时判断触摸手势中的触摸点数信息,当触摸点数信息包含一个触摸点时,如果所述阈值时间内的触摸点未发生移动则查找所述映射模型得到鼠标事件中的左键按键事件,如果阈值时间内该触摸点发生移动则查找映射模型得到鼠标事件中的中键按键事件,当触摸点数信息包含两个触摸点时,如果阈值时间内两个触摸点均未发生移动则查找映射模型得到鼠标事件中的右键按键事件。
优选的,所述取触摸手势中的触摸点数信息,根据触摸点数信息查找映射模型得到鼠标事件中的按键事件,然后在获得按键事件的基础上获取触摸手势中的移动轨迹,根据移动轨迹查找所述映射模型得到鼠标事件中对应的按键事件。
本发明有益效果:1:本发明解决了移动端的hover伪类效果原生缺失的问题和移动端和pc端的hover效果兼容的问题以及“穿透现象”带来的体验问题。
2:本发明基于鼠标事件的多点触摸手势交互中间件独立于应用程序之外,采用鼠标事件映射方法,在操作系统和应用程序之间加入一层映射,将基于多点触摸的交互手势与系统鼠标事件进行对应,以鼠标事件作为中转,间接实现手势操作与应用程序响应的映射,能够在不对应用程序进行任何修改的前提下,使其支持基于多点触摸的手势操作。
附图说明
图1为本发明所述的系统流程图;
图2为本发明所述的触摸点数信息流程图。
具体实施方式
下面结合附图对本发明的具体实施方式作进一步说明。在此需要说明的是,对于这些实施方式的说明用于帮助理解本发明,但并不构成对本发明的限定。此外,下面所描述的本发明各个实施方式中所涉及的技术特征只要彼此之间未构成冲突就可以相互组合。
一种适用于移动终端的hover显示方法,包括以下几个步骤:
S1:基于组件技术构建一种通用组件,在组件底层通过JavaScript判断当前环境是属于可触摸环境还是不可触摸环境;
S2:对于可触摸环境:利用标准的Touch事件模型,实现模拟算法完整模拟移动端来表达hover效果;
S3:对于不可触摸环境:利用标准的Mouse事件模型,实现模拟算法完整模拟鼠标来表达hover效果;
S4:对于穿透现象,通过阻止流程传播的方式解决。
优选的,所述用特定字符对html模板所需渲染部分对应的数据进行标识,并将该html模板及标识所需渲染部分对应的数据均以变量的形式传入引擎解析模块中。
优选的,所述引擎解析模块使用JavaScript语言的正则表达式对传入的html模板及标识所需渲染部分对应的数据进行匹配,匹配出传入html模板变量及所需渲染部分对应的数据变量,并将其组装成html代码形式返回前端。
优选的,所述对于不同的业务类型,需要的HTML模板是不同的,针对不同的业务类型,在HTML模板中添加不同的数据类型的属性。
优选的,所述Touch事件模型的建立为了简化对单个和多个触摸事件的识别,特定窗口内的每一个视图都可以被配置成多点触摸视图或是单点触摸视图,每一个视图都可以被配置成独占或是非独占视图,根据视图的配置,可以忽略或是识别该视图以及其他视图中的触摸事件。
优选的,所述经过处理的触摸输入数据可以被称为一个或多个触摸事件,并且可以采用由多点触摸面板产生的原始触摸数据更易于处理的格式,每一个触摸事件都可以包括当前正发生触摸处的一组坐标。
优选的,所述获取来自触摸敏感设备的一个或多个触摸输入信号,基于触摸输入信号确定两个或多个触摸事件,其中该触摸事件和在触摸敏感设备上显示的web页面中的两个或更多个区域相关联的触摸输入信号相关联,以及通过编程接口提供对至少一个触摸事件的访问。
优选的,所述存储触摸手势模型和鼠标事件之间映射模型的映射存储单元,用于获取触摸手势的手势输入单元和触摸手势从映射模型获取对应鼠标事件的控制单元和用于发送鼠标事件的鼠标事件发送单元,所述控制单元分别与映射存储单元、手势输入单元和鼠标事件发送单元相连。
优选的,所述在触摸点数查找映射模型数据从而得到鼠标事件中的按键事件,通过设置阈值时间,实时判断触摸手势中的触摸点数信息,当触摸点数信息包含一个触摸点时,如果所述阈值时间内的触摸点未发生移动则查找所述映射模型得到鼠标事件中的左键按键事件,如果阈值时间内该触摸点发生移动则查找映射模型得到鼠标事件中的中键按键事件,当触摸点数信息包含两个触摸点时,如果阈值时间内两个触摸点均未发生移动则查找映射模型得到鼠标事件中的右键按键事件。
优选的,所述取触摸手势中的触摸点数信息,根据触摸点数信息查找映射模型得到鼠标事件中的按键事件,然后在获得按键事件的基础上获取触摸手势中的移动轨迹,根据移动轨迹查找所述映射模型得到鼠标事件中对应的按键事件。
综上可知,视图可以接收始于该视图内的触摸事件,如果用户保持将某个手指按在显示器上,那么该视图随后可以接收到表明持续性触摸的多个触摸事件;如果用户移动已按下的手指,那么该视图可以接收到表明触摸移动的多个触摸事件;如果用户将按下的手指移到视图之外,那么该视图仍旧可以接收与该移动相关联的触摸事件。
本实施例通过在操作系统和应用程序之间的一个多点触摸中间键来实现,操作系统通过硬件驱动程序获取用户输入的触摸手势信号,并将触摸手势信号发送给多点触摸中间件,然后通过中间件将触摸手势信号转换为鼠标事件信号并发送给操作系统中的应用程序。
以上结合附图对本发明的实施方式作了详细说明,但本发明不限于所描述的实施方式。对于本领域的技术人员而言,在不脱离本发明原理和精神的情况下,对这些实施方式进行多种变化、修改、替换和变型,仍落入本发明的保护范围内。
Claims (10)
1.适用于移动终端的hover显示方法,其特征在于:包括以下几个步骤:
S1:基于组件技术构建一种通用组件,在组件底层通过JavaScript判断当前环境是属于可触摸环境还是不可触摸环境;
S2:对于可触摸环境:利用标准的Touch事件模型,实现模拟算法完整模拟移动端的表达hover效果;
S3:对于不可触摸环境:利用标准的Mouse事件模型,实现模拟算法完整模拟鼠标来表达hover效果;
S4:对于穿透现象,通过阻止流程传播的方式解决。
2.根据权利要求1所述的一种适用于移动终端的hover显示方法,其特征在于:所述用特定字符对html模板所需渲染部分对应的数据进行标识,并将该html模板及标识所需渲染部分对应的数据均以变量的形式传入引擎解析模块中。
3.根据权利要求1所述的一种适用于移动终端的hover显示方法,其特征在于:所述引擎解析模块使用JavaScript语言的正则表达式对传入的html模板及标识所需渲染部分对应的数据进行匹配,匹配出传入html模板变量及所需渲染部分对应的数据变量,并将其组装成html代码形式返回前端。
4.根据权利要求1所述的一种适用于移动终端的hover显示方法,其特征在于:所述对于不同的业务类型,需要的HTML模板是不同的,针对不同的业务类型,在HTML模板中添加不同的数据类型的属性。
5.根据权利要求1所述的一种适用于移动终端的hover显示方法,其特征在于:所述Touch事件模型的建立为了简化对单个和多个触摸事件的识别,特定窗口内的每一个视图都可以被配置成多点触摸视图或是单点触摸视图,每一个视图都可以被配置成独占或是非独占视图,根据视图的配置,可以忽略或是识别该视图以及其他视图中的触摸事件。
6.根据权利要求1所述的一种适用于移动终端的hover显示方法,其特征在于:所述经过处理的触摸输入数据可以被称为一个或多个触摸事件,并且可以采用由多点触摸面板产生的原始触摸数据更易于处理的格式,每一个触摸事件都可以包括当前正发生触摸处的一组坐标。
7.根据权利要求1所述的一种适用于移动终端的hover显示方法,其特征在于:所述获取来自触摸敏感设备的一个或多个触摸输入信号,基于触摸输入信号确定两个或多个触摸事件,其中该触摸事件和在触摸敏感设备上显示的web页面中的两个或更多个区域相关联的触摸输入信号相关联,以及通过编程接口提供对至少一个触摸事件的访问。
8.根据权利要求7所述的一种适用于移动终端的hover显示方法,其特征在于:所述存储触摸手势模型和鼠标事件之间映射模型的映射存储单元,用于获取触摸手势的手势输入单元和触摸手势从映射模型获取对应鼠标事件的控制单元和用于发送鼠标事件的鼠标事件发送单元,所述控制单元分别与映射存储单元、手势输入单元和鼠标事件发送单元相连。
9.根据权利要求3所述的一种适用于移动终端的hover显示方法,其特征在于:所述在触摸点数查找映射模型数据从而得到鼠标事件中的按键事件,通过设置阈值时间,实时判断触摸手势中的触摸点数信息,当触摸点数信息包含一个触摸点时,如果所述阈值时间内的触摸点未发生移动则查找所述映射模型得到鼠标事件中的左键按键事件,如果阈值时间内该触摸点发生移动则查找映射模型得到鼠标事件中的中键按键事件,当触摸点数信息包含两个触摸点时,如果阈值时间内两个触摸点均未发生移动则查找映射模型得到鼠标事件中的右键按键事件。
10.根据权利要求1所述的一种适用于移动终端的hover显示方法,其特征在于:所述取触摸手势中的触摸点数信息,根据触摸点数信息查找映射模型得到鼠标事件中的按键事件,然后在获得按键事件的基础上获取触摸手势中的移动轨迹,根据移动轨迹查找所述映射模型得到鼠标事件中对应的按键事件。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201910487876.6A CN110308805A (zh) | 2019-06-05 | 2019-06-05 | 适用于移动终端的hover显示方法 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201910487876.6A CN110308805A (zh) | 2019-06-05 | 2019-06-05 | 适用于移动终端的hover显示方法 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN110308805A true CN110308805A (zh) | 2019-10-08 |
Family
ID=68075691
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201910487876.6A Withdrawn CN110308805A (zh) | 2019-06-05 | 2019-06-05 | 适用于移动终端的hover显示方法 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN110308805A (zh) |
Cited By (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN110908580A (zh) * | 2019-11-11 | 2020-03-24 | 广州视源电子科技股份有限公司 | 控制应用的方法和装置 |
-
2019
- 2019-06-05 CN CN201910487876.6A patent/CN110308805A/zh not_active Withdrawn
Cited By (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN110908580A (zh) * | 2019-11-11 | 2020-03-24 | 广州视源电子科技股份有限公司 | 控制应用的方法和装置 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
US10444961B2 (en) | Hover-based interaction with rendered content | |
JP6400477B2 (ja) | ジェスチャベースの検索 | |
EP2821906B1 (en) | Method for processing touch operation and mobile terminal | |
CN102819416B (zh) | 一种实现组件内容显示的方法和装置 | |
US20150193549A1 (en) | History as a branching visualization | |
CN103634641A (zh) | 通过移动终端对智能电视进行手势控制的方法和系统 | |
CN102768595B (zh) | 一种识别触摸屏上触控操作指令的方法及装置 | |
CN102221971A (zh) | 自由形式数学计算 | |
CN102323875A (zh) | 基于鼠标事件的多点触摸手势交互方法及中间件 | |
CN106844635A (zh) | 网页中的元素的编辑方法及装置 | |
KR20140132731A (ko) | 웹 페이지 애플리케이션 제어 기법 | |
CN105302461B (zh) | 一种用于在移动应用中提供目标页面的方法与设备 | |
CN104866097A (zh) | 手持信号输出装置和手持装置输出信号的方法 | |
CN109547836A (zh) | 直播交互方法及装置、电子设备、存储介质 | |
CN103365555A (zh) | 数据处理方法和系统、数据收集方法和系统 | |
CN104020989B (zh) | 基于远程应用的控制方法和系统 | |
CN108399042A (zh) | 一种触控识别方法、装置和系统 | |
CN102541331B (zh) | 触控显示器中多区域滑动点击响应方法及系统 | |
CN110308805A (zh) | 适用于移动终端的hover显示方法 | |
CN104572997A (zh) | 内容获取方法、装置及用户设备 | |
CN103472931A (zh) | 鼠标仿真触控屏幕操作的方法 | |
CN105373329A (zh) | 显示器与展台的交互方法及系统 | |
CN102073415A (zh) | 触摸系统、辅助装置及其输入方法 | |
CN113093961B (zh) | 窗口切换方法、存储介质及相关设备 | |
CN204740560U (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 | ||
WW01 | Invention patent application withdrawn after publication |
Application publication date: 20191008 |
|
WW01 | Invention patent application withdrawn after publication |