CN107526488A - 一种在微信网页中实现css显示效果的方法和*** - Google Patents

一种在微信网页中实现css显示效果的方法和*** Download PDF

Info

Publication number
CN107526488A
CN107526488A CN201610450958.XA CN201610450958A CN107526488A CN 107526488 A CN107526488 A CN 107526488A CN 201610450958 A CN201610450958 A CN 201610450958A CN 107526488 A CN107526488 A CN 107526488A
Authority
CN
China
Prior art keywords
click
dom
css
display
effects
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
Application number
CN201610450958.XA
Other languages
English (en)
Inventor
周建英
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
TVM Beijing Technology Co Ltd
Original Assignee
TVM Beijing Technology Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by TVM Beijing Technology Co Ltd filed Critical TVM Beijing Technology Co Ltd
Priority to CN201610450958.XA priority Critical patent/CN107526488A/zh
Publication of CN107526488A publication Critical patent/CN107526488A/zh
Pending legal-status Critical Current

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/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/04817—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance using icons
    • 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
    • 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

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Software Systems (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本发明公开了一种在微信网页中实现CSS显示效果的方法和***，该方法包括：微信网页JavaScript脚本监听对触摸屏的点击；点击所述触摸屏；获得触摸位置的DOM；为所述DOM的class属性进行赋值；所述DOM显示CSS效果；点击离开；执行所述DOM对应的操作。本发明技术方案能够丰富微信浏览器的显示功能，在微信网页实现CSS显示效果，指示点击位置，表明操作微信网页的状态，为用户操控提供动态、形象的指示，提高网页操控的效率，提升了用户使用微信网页的体验。

Description

一种在微信网页中实现CSS显示效果的方法和***
技术领域
本发明涉及互联网技术领域，特别涉及一种在微信网页中实现CSS显示效果的方法和***。
背景技术
随着移动互联网技术的发展，用户越来越多的使用移动聊天工具(MIM)，通过MIM来发送即时文字、图片或者视频信息，甚至进行语音的实时通话。MIM业务提供商高度重视此业务的发展，通过MIM来实现移动互联网客户群的积累，通过流量经营逐渐巩固用户基础，并带动移动互联网广告、电子商务、门户、互联网金融和互联网社区等业务的发展，从而实现移动互联网流量的价值经营。
在众多MIM产品中，微信即时聊天工具是一种可以让交流双方在网络上建立某种聊天渠道的实时通讯软件，可以提供联络人名单、在线状态、历史聊天记录等基本聊天功能。使用者使用即时聊天工具可以经济、方便地通过互联网发送文字、图片、视频等信息。用户还可以通过微信享受到类似于传统电信运营商所提供的类似于短信、彩信等额业务，并且还可以享受到更加附加的增值通信服务。根据腾讯科技公司公布的2015年财报数据，微信每月活跃用户已达到5.49亿，覆盖国家超过200个，覆盖语言超过20种，移动应用对接超过85,000个，已经成为移动社交的重要渠道，已成为人们生活的重要部分。
在微信的诸多功能中，除了发送和接收信息实现信息免费传递之外，更是互联网营销、购物、传媒、支付的载体，而浏览网页内容是非常重要的功能之一。下列几方面因素对微信网页浏览提出了巨大的需求：
1、公众号服务。立足于微信的强大用户基础，企业纷纷发布微信公众号，以扩大市场影响力。通过微信公众账号渠道，为经济实体的实际运营带来了媒体、营销、客服、公共服务等帮助应用，将品牌推广给上亿的微信用户，减少了宣传成本，提高了品牌知名度，打造了更具影响力的品牌形象，有效实现了O2O和流量变现。随着微信公众号的影响力的增强，拥有粉丝和流量的公众号会发展越来越迅速，进一步推动用户粉丝数量和流量规模更快的增长。
2、微信购物。得益于移动互联网应用和创新的不断发展，中国电子商务市场也纷纷布局移动端。微信购物发展迅速，覆盖商品种类广泛，由于商品信息传播的便捷性而吸引了大量的购买用户。同时，微信购物平台的运营成本低，保证了产品的低成本销售，具有价格竞争力；微信购物平台的技术门槛低，可以节约大量的人力资源成本。微信购物的沟通和支付便捷，可以在微信里完成商家和买家的互动，也可以完成下单和支付，大大方便了互联网购物的流程。所以，微信购物平台孕育着巨大的商机。
3、微信公众平台也是很好的资讯传播方式。微信能够对专业的领域进行宣传，为用户传递闭环式的媒体内容，获得高关注度的目标用户。微信用户可以根据自己的兴趣选择不同的专业内容进行关注，进而形成用户自己的一个资讯信息资源渠道。
上述微信功能的实现都需要借助微信网页浏览功能，才能够从有限的微信信息中获得后台的庞大资源。
与专业的网页浏览器相比，微信浏览器的控制功能相对简单，只提供基础的浏览功能，页面展示效果相对简单。在用户使用微信浏览网页的情况下，操控网页应用或点击网页的图标按键时，由于微信浏览器不提供图标的CSS显示效果，所以用户无法判断点击屏幕的位置是否正确，会造成点击操作无效的情况，或造成点击错误按键进入错误链接地址的情况。在实际的使用过程中，现有的微信浏览器功能影响了用户的使用体验，也降低了用户使用微信浏览网页的效率。
发明内容
本发明提供一种在微信网页中实现CSS显示效果的方法和***，对微信网页中的图标按键添加多样化的显示效果，指示点击位置，表明操作微信网页的状态，为用户操控提供动态、形象的显示效果，增强了网页的易操作性，提高网页操控的效率，提升了用户使用微信网页的用户体验。
本发明的技术方案提供了一种在微信网页中实现CSS显示效果的方法，包括以下步骤：
微信网页JavaScript脚本监听对触摸屏的点击；
点击所述触摸屏；
获得触摸位置的DOM；
为所述DOM的class属性进行赋值；
所述DOM显示CSS效果；
点击离开；
执行所述DOM对应的操作。
进一步的，所述class属性包括但不限于阴影、悬浮、圆角、立体的显示效果。
进一步的，所述点击所述触摸屏，进一步包括：对触摸屏幕的时间少于100ms的点击判断为误操作。
进一步的，对所述误操作不显示CSS效果，不执行所述DOM对应的操作。
进一步的，所述DOM显示CSS效果，进一步包括：点击屏幕期间，DOM持续显示CSS效果。
进一步的，若点击离开的时间间隔少于100ms，则DOM继续显示CSS效果，并且不执行对应的操作。
进一步的，点击离开后，所述DOM显示CSS效果持续100ms的时间。
本发明的技术方案还提供了一种在微信网页中实现CSS显示效果的***，包括点击控制单元、显示控制单元和显示单元，其中，
点击控制单元用于判断点击位置，判断正常点击或误操作，和发送点击信号；
显示控制单元用于接收所述点击信号，并发送显示控制信号，控制显示效果；
显示单元用于接收所述显示控制信号，并进行显示。
进一步的，点击控制单元根据点击位置确定对应的DOM；
显示控制单元和显示单元对所述对应的DOM显示CSS效果。
进一步的，点击控制单元判断点击行为是否为误操作；
误操作情况下，显示控制单元不发送显示控制信号。
本发明技术方案为网页元素的class属性进行赋值，实现类似于CSS显示效果，对微信网页中的图标按键添加多样化的显示特征，为用户指示点击位置，表明操作微信网页的状态，为用户操控提供动态、形象的显示效果，增强了网页的易操作性，提高网页操控的效率，提升了用户使用微信网页的用户体验。
本发明的其它特征和优点将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者通过实施本发明而了解。本发明的目的和其他优点可通过在所写的说明书、权利要求书、以及附图中所特别指出的结构来实现和获得。
下面通过附图和实施例，对本发明的技术方案做进一步的详细描述。
附图说明
附图用来提供对本发明的进一步理解，并且构成说明书的一部分，与本发明的实施例一起用于解释本发明，并不构成对本发明的限制。在附图中：
图1为本发明实施例一中在微信网页中实现CSS显示效果的方法流程图；
图2为本发明实施例一中在微信网页中实现CSS显示效果的***结构图。
具体实施方式
以下结合附图对本发明的优选实施例进行说明，应当理解，此处所描述的优选实施例仅用于说明和解释本发明，并不用于限定本发明。
图1为本发明实施例一中在微信网页中实现CSS显示效果的方法流程图。如图1所示，该流程包括以下步骤：
步骤101、微信网页JavaScript脚本监听对触摸屏的点击。
步骤102、点击触摸屏。
用户点击触摸屏幕，点击控制单元计算用户点击屏幕的时间，若时间少于100ms，则判断本次点击为误操作；
判断点击为误操作的情况下，不显示CSS效果，不执行DOM所对应的操作；
步骤103、获得触摸位置的DOM。
步骤104、为DOM的class属性进行赋值。
class属性包括但不限于阴影、悬浮、圆角、立体的显示效果，对网页元素的class属性进行赋值后，获得类似CSS显示效果。
步骤105、DOM显示CSS效果。
点击屏幕期间，DOM持续显示CSS效果。
步骤106、点击离开。
若点击离开的时间间隔少于100ms，则DOM继续显示CSS效果，并且不执行对应的操作；
点击离开后，DOM显示CSS效果持续100ms的时间。
步骤107、执行DOM对应的操作。
为了实现上述实施例一中的流程，本实施例还提供了一种在微信网页中实现CSS显示效果的***，图2为本发明实施例一中在微信网页中实现CSS显示效果的***结构图。如图2所示，该***包括点击控制单元201、显示控制单元202和显示单元203，其中，
点击控制单元用于判断点击位置，判断正常点击或误操作，和发送点击信号；
显示控制单元用于接收所述点击信号，并发送显示控制信号，控制显示效果；
显示单元用于接收所述显示控制信号，并进行显示。
进一步的，点击控制单元根据点击位置确定对应的DOM；
显示控制单元和显示单元对所述对应的DOM显示CSS效果。
进一步的，点击控制单元判断点击行为是否为误操作；
误操作情况下，显示控制单元不发送显示控制信号。
上述实施例中的技术方案通过对网页元素的class属性进行赋值，实现类似于CSS显示效果，对微信网页中的图标按键添加多样化的显示特征，为用户指示点击位置，表明操作微信网页的状态，为用户操控提供动态、形象的显示效果，增强了网页的易操作性，提高网页操控的效率，提升了用户使用微信网页的用户体验。
本领域内的技术人员应明白，本发明的实施例可提供为方法、***、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器和光学存储器等)上实施的计算机程序产品的形式。
本发明是参照根据本发明实施例的方法、设备(***)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。

Claims (10)

1.一种在微信网页中实现CSS显示效果的方法，其特征在于，包括以下步骤：
微信网页JavaScript脚本监听对触摸屏的点击；
点击所述触摸屏；
获得触摸位置的DOM；
为所述DOM的class属性进行赋值；
所述DOM显示CSS效果；
点击离开；
执行所述DOM对应的操作。
2.根据权利要求1所述的方法，其特征在于，所述class属性包括但不限于阴影、悬浮、圆角、立体的显示效果。
3.根据权利要求1所述的方法，其特征在于，所述点击所述触摸屏，进一步包括：
对触摸屏幕的时间少于100ms的点击判断为误操作。
4.根据权利要求1或3所述的方法，其特征在于，对所述误操作不显示CSS效果，不执行所述DOM对应的操作。
5.根据权利要求1所述的方法，其特征在于，所述DOM显示CSS效果，进一步包括：
点击屏幕期间，DOM持续显示CSS效果。
6.根据权利要求1所述的方法，其特征在于，若点击离开的时间间隔少于100ms，则DOM继续显示CSS效果，并且不执行对应的操作。
7.根据权利要求1所述的方法，其特征在于，进一步包括：
点击离开后，所述DOM显示CSS效果持续100ms的时间。
8.一种在微信网页中实现CSS显示效果的***，其特征在于，包括点击控制单元、显示控制单元和显示单元，其中，
点击控制单元用于判断点击位置，判断正常点击或误操作，和发送点击信号；
显示控制单元用于接收所述点击信号，并发送显示控制信号，控制显示效果；
显示单元用于接收所述显示控制信号，并进行显示。
9.根据权利要求8所述的***，其特征在于，进一步包括：
点击控制单元根据点击位置确定对应的DOM；
显示控制单元和显示单元对所述对应的DOM显示CSS效果。
10.根据权利要求8所述的***，其特征在于，进一步包括：
点击控制单元判断点击行为是否为误操作；
误操作情况下，显示控制单元不发送显示控制信号。
CN201610450958.XA 2016-06-21 2016-06-21 一种在微信网页中实现css显示效果的方法和*** Pending CN107526488A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201610450958.XA CN107526488A (zh) 2016-06-21 2016-06-21 一种在微信网页中实现css显示效果的方法和***

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201610450958.XA CN107526488A (zh) 2016-06-21 2016-06-21 一种在微信网页中实现css显示效果的方法和***

Publications (1)

Publication Number Publication Date
CN107526488A true CN107526488A (zh) 2017-12-29

Family

ID=60734994

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201610450958.XA Pending CN107526488A (zh) 2016-06-21 2016-06-21 一种在微信网页中实现css显示效果的方法和***

Country Status (1)

Country Link
CN (1) CN107526488A (zh)

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2009082377A1 (en) * 2007-12-26 2009-07-02 Hewlett-Packard Development Company, L.P. Touch wheel zoom and pan
CN101616213A (zh) * 2008-06-25 2009-12-30 Lg电子株式会社 针对移动通信终端提供触感效果
CN102890607A (zh) * 2012-03-12 2013-01-23 中兴通讯股份有限公司 终端屏幕显示控制方法及终端
CN103164163A (zh) * 2013-03-27 2013-06-19 东莞宇龙通信科技有限公司 显示调整的方法及装置
CN103677542A (zh) * 2013-12-27 2014-03-26 乐视网信息技术（北京）股份有限公司 一种页面呈现方法及装置

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2009082377A1 (en) * 2007-12-26 2009-07-02 Hewlett-Packard Development Company, L.P. Touch wheel zoom and pan
CN101616213A (zh) * 2008-06-25 2009-12-30 Lg电子株式会社 针对移动通信终端提供触感效果
CN102890607A (zh) * 2012-03-12 2013-01-23 中兴通讯股份有限公司 终端屏幕显示控制方法及终端
CN103164163A (zh) * 2013-03-27 2013-06-19 东莞宇龙通信科技有限公司 显示调整的方法及装置
CN103677542A (zh) * 2013-12-27 2014-03-26 乐视网信息技术（北京）股份有限公司 一种页面呈现方法及装置

Similar Documents

Publication Publication Date Title
US10671692B2 (en) Uniquely identifying and tracking selectable web page objects
US20180204238A1 (en) Information processing method, server, first terminal, and computer storage medium
US11587111B2 (en) Methods and systems for automatically testing and applying codes to electronic shopping carts
US8832270B2 (en) User vacillation detection and response
CA3088567A1 (en) Website creation system for creating websites having at least one series of directional webpages and related methods
WO2011040371A1 (ja) Ｗｅｂページにおけるオブジェクト変位方法
CN103678325B (zh) 一种用于提供与初始页面相对应的浏览页面的方法和设备
CN103858121B (zh) 使Web应用获取数据库变化的方法和***
WO2020215977A1 (zh) 用于展示信息的***、方法及装置
US11941653B2 (en) Methods and systems for testing and applying codes to electronic shopping carts
CN103098001A (zh) 一种用户界面的处理方法和电子设备
CN109615415B (zh) 一种广告预览方法及装置
CN107633426A (zh) 基于环境数据的广告信息植入方法及***
US10217142B1 (en) Selective solicitation of user feedback for digital goods markets
KR20160108731A (ko) 온라인 쇼핑몰 어플리케이션을 생성하고 온라인 쇼핑몰 어플리케이션의 접속 정보를 분석하는 방법 및 장치
TWI503736B (zh) Object control method, object control program and Web server
TW201826204A (zh) 產生動畫資訊的方法、於使用者終端顯示動畫的方法、應用程式及系統
JP2018022298A (ja) 配信装置、配信方法、配信プログラム及び情報表示プログラム
CN105608610A (zh) 信息推送方法和装置
JP5084902B2 (ja) 商品情報提供装置及び方法
CN107526488A (zh) 一种在微信网页中实现css显示效果的方法和***
McLean et al. The Customer Experience… Is there an App for that? A conceptual understanding of the customer experience with m-commerce mobile applications
CN107729157A (zh) 一种复制和粘贴微信网页内容的方法和***
CN107037960A (zh) 基于电商服务的键盘操作方法及装置
KR20170137844A (ko) 웹 페이지 작성 지원 장치, 및 기억 매체

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
WD01 Invention patent application deemed withdrawn after publication
WD01 Invention patent application deemed withdrawn after publication

Application publication date: 20171229