CN107526488A - A kind of method and system that CSS display effects are realized in wechat webpage - Google Patents
A kind of method and system that CSS display effects are realized in wechat webpage Download PDFInfo
- 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
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
Abstract
The invention discloses a kind of method and system that CSS display effects are realized in wechat webpage, this method includes：Click of the wechat webpage JavaScript script monitors to touch-screen；Click on the touch-screen；Obtain the DOM of touch location；Assignment is carried out for the class attributes of the DOM；The DOM shows CSS effects；Click away from；Perform and operated corresponding to the DOM.Technical solution of the present invention can enrich the display function of wechat browser, CSS display effects are realized in wechat webpage, indicate click location, show the state of operation wechat webpage, the instruction of dynamic, image is provided for user's manipulation, the efficiency of webpage manipulation is improved, improves the experience that user uses wechat webpage.
Description
Technical field
The present invention relates to Internet technical field, more particularly to a kind of side that CSS display effects are realized in wechat webpage
Method and system.
Background technology
With the development of development of Mobile Internet technology, user more and more using mobile chat tool (MIM), passes through MIM
To send instant character, picture or video information, or even carry out the real time phone call of voice.MIM service providers pay much attention to
The development of this business, the accumulation of mobile Internet customers is realized by MIM, user's base is gradually consolidated by flow operation
Plinth, and the development of the business such as mobile Internet advertisement, ecommerce, door, internet finance and the Internet community is driven, so as to
Realize the value management of mobile Internet flow.
In numerous MIM products, wechat instant messenger is that one kind can allow exchange both sides to establish certain on network
The real-time communication software of chat channel, the chat work(substantially such as data contact person list, presence, history chat record can be provided
Energy.User using instant messenger can it is economical, send the information such as word, picture, video conveniently by internet.With
Family can also be enjoyed by wechat similar to conventional telecommunications operator provided be similar to short message, multimedia message single-candidate business, and
And it can also benefit from more additional increment communication service.The financial report data in 2015 announced according to Tentent Science company, it is micro-
Monthly any active ues have reached 5.49 hundred million to letter, and covering country is more than 200, and for covering language more than 20 kinds, Mobile solution docking is super
85,000 is crossed, has become the important channel of mobile social activity, it has also become the pith of people's life.
In the various functions of wechat, in addition to sending and receiving information realization information for free and transmitting, even more internet
Marketing, shopping, medium, the carrier paid, and browsed web content is one of very important function.Following several respects factor pair
Wechat web page browsing proposes huge demand：
1st, public number service.Based on the powerful user base of wechat, enterprise issues wechat public number one after another, to expand city
Field influence power.By wechat public's account channel, media, marketing, customer service, public clothes are brought for the actual operation of economic entity
The helps such as business are applied, and are given brand promotion to more than one hundred million wechat users, are reduced publicity cost, improve brand recognition, make
The more brand image of influence power, effectively realizes O2O and flow is cashed.With the enhancing of the influence power of wechat public number,
Possessing the public number of bean vermicelli and flow can develop more and more rapidly, further promote user's bean vermicelli quantity and flow scale faster
Increase.
2nd, wechat is done shopping.Have benefited from the continuous development of mobile Internet application and innovation, China's E-Commerce Market is also confused
Confused layout mobile terminal.Wechat shopping is quickly grown, and covering type of merchandize is extensive, is attracted due to the convenience that merchandise news is propagated
Substantial amounts of purchase user.Meanwhile the operation cost of wechat shopping platform is low, the low cost sale of product is ensure that, there is valency
Lattice competitiveness；The technical threshold of wechat shopping platform is low, can save substantial amounts of cost of human resources.Wechat shopping communication and
It is convenient to pay, and the interaction of businessman and buyer can be completed in wechat, can also complete to place an order and pay, greatly facilitate interconnection
The flow of net purchase thing.So wechat shopping platform breeds huge business opportunity.
3rd, wechat public platform is also good dissemination of information mode.Wechat can publicize to the field of specialty, be
User transmits the media content of closed loop, obtains the targeted customer of high attention rate.Wechat user can select according to the interest of oneself
Select different professional contents to be paid close attention to, and then form the information resources access of user oneself.
The realization of above-mentioned wechat function is required for by wechat web page browsing function, can be from limited wechat information
Obtain the huge resource on backstage.
Compared with the web browser of specialty, the control function of wechat browser is relatively easy, only provides browsing for basis
Function, page presentation effect are relatively easy.In the case where user browses webpage using wechat, manipulate web application or click on net
During the icon button of page, because wechat browser does not provide the CSS display effects of icon, so user can not judge to click on screen
Position it is whether correct, the invalid situation of clicking operation can be caused, or cause to click on missed keys and enter false links address
Situation.During the use of reality, existing wechat browser function have impact on the usage experience of user, also reduce user
The efficiency of webpage is browsed using wechat.
The content of the invention
The present invention provides a kind of method and system that CSS display effects are realized in wechat webpage, in wechat webpage
Icon button adds diversified display effect, indicates click location, shows to operate the state of wechat webpage, is carried for user's manipulation
For dynamic, the display effect of image, the ease for operation of webpage is enhanced, the efficiency of webpage manipulation is improved, improves user's use
The Consumer's Experience of wechat webpage.
Technical scheme provides a kind of method that CSS display effects are realized in wechat webpage, including following
Step：
Click of the wechat webpage JavaScript script monitors to touch-screen；
Click on the touch-screen；
Obtain the DOM of touch location；
Assignment is carried out for the class attributes of the DOM；
The DOM shows CSS effects；
Click away from；
Perform and operated corresponding to the DOM.
Further, the class attributes include but is not limited to shade, suspension, fillet, the display effect of solid.
Further, it is described to click on the touch-screen, further comprise：100ms point is less than to the time for touching screen
Hit and be judged as maloperation.
Further, CSS effects are not shown to the maloperation, does not perform and is operated corresponding to the DOM.
Further, the DOM shows CSS effects, further comprises：During clicking on screen, the continuously display CSS effects of DOM
Fruit.
Further, if the time interval clicked away from is less than 100ms, DOM continues to show CSS effects, and does not hold
Operated corresponding to row.
Further, after clicking away from, the DOM shows CSS lasts 100ms time.
Technical scheme additionally provides a kind of system that CSS display effects are realized in wechat webpage, including point
Control unit, display control unit and display unit are hit, wherein,
Click on control unit to be used to judge click location, judge normal click or maloperation, and send click signal；
Display control unit is used to receive the click signal, and sends display control signal, controls display effect；
Display unit is used to receive the display control signal, and is shown.
Further, control unit DOM according to corresponding to determining click location is clicked on；
Display control unit and display unit show CSS effects to the corresponding DOM.
Further, click on control unit and judge whether click behavior is maloperation；
In the case of maloperation, display control unit does not send display control signal.
Technical solution of the present invention carries out assignment for the class attributes of web page element, and realization is similar to CSS display effects, right
Icon button in wechat webpage adds diversified display feature, and click location is indicated for user, shows to operate wechat webpage
State, provides dynamic, the display effect of image for user's manipulation, enhances the ease for operation of webpage, improve what webpage manipulated
Efficiency, improve the Consumer's Experience that user uses wechat webpage.
Other features and advantages of the present invention will be illustrated in the following description, also, partly becomes from specification
Obtain it is clear that or being understood by implementing the present invention.The purpose of the present invention and other advantages can be by the explanations write
Specifically noted structure is realized and obtained in book, claims and accompanying drawing.
Below by drawings and examples, technical scheme is described in further detail.
Brief description of the drawings
Accompanying drawing is used for providing a further understanding of the present invention, and a part for constitution instruction, the reality with the present invention
Apply example to be used to explain the present invention together, be not construed as limiting the invention.In the accompanying drawings：
Fig. 1 is the method flow diagram for realizing CSS display effects in the embodiment of the present invention one in wechat webpage；
Fig. 2 is the system construction drawing for realizing CSS display effects in the embodiment of the present invention one in wechat webpage.
Embodiment
The preferred embodiments of the present invention are illustrated below in conjunction with accompanying drawing, it will be appreciated that described herein preferred real
Apply example to be merely to illustrate and explain the present invention, be not intended to limit the present invention.
Fig. 1 is the method flow diagram for realizing CSS display effects in the embodiment of the present invention one in wechat webpage.Such as Fig. 1 institutes
Show, the flow comprises the following steps：
The click of step 101, wechat webpage JavaScript script monitors to touch-screen.
Step 102, point touching screen.
User's point touching screen, click on control unit and calculate the time that user clicks on screen, if the time is less than 100ms,
Then judge that this is clicked on as maloperation；
Judge in the case of clicking on as maloperation, do not show CSS effects, do not perform the operation corresponding to DOM；
Step 103, the DOM for obtaining touch location.
Step 104, the class attributes progress assignment for DOM.
Class attributes include but is not limited to shade, suspension, fillet, the display effect of solid, to the class of web page element
After attribute carries out assignment, similar CSS display effects are obtained.
Step 105, DOM show CSS effects.
During clicking on screen, the continuously display CSS effects of DOM.
Step 106, click away from.
If the time interval clicked away from is less than 100ms, DOM continues to show CSS effects, and does not perform corresponding behaviour
Make；
After clicking away from, DOM shows CSS lasts 100ms time.
Step 107, perform operation corresponding to DOM.
In order to realize the flow in above-described embodiment one, the present embodiment additionally provides one kind and realizes CSS in wechat webpage
The system of display effect, Fig. 2 are the system construction drawing for realizing CSS display effects in the embodiment of the present invention one in wechat webpage.
As shown in Fig. 2 the system includes clicking on control unit 201, display control unit 202 and display unit 203, wherein,
Click on control unit to be used to judge click location, judge normal click or maloperation, and send click signal；
Display control unit is used to receive the click signal, and sends display control signal, controls display effect；
Display unit is used to receive the display control signal, and is shown.
Further, control unit DOM according to corresponding to determining click location is clicked on；
Display control unit and display unit show CSS effects to the corresponding DOM.
Further, click on control unit and judge whether click behavior is maloperation；
In the case of maloperation, display control unit does not send display control signal.
For technical scheme in above-described embodiment by carrying out assignment to the class attributes of web page element, realization is similar to CSS
Display effect, diversified display feature is added to the icon button in wechat webpage, is indicated click location for user, is shown to grasp
Make the state of wechat webpage, provide dynamic, the display effect of image for user's manipulation, enhance the ease for operation of webpage, improve
The efficiency of webpage manipulation, improve the Consumer's Experience that user uses wechat webpage.
It should be understood by those skilled in the art that, embodiments of the invention can be provided as method, system or computer program
Product.Therefore, the present invention can use the reality in terms of complete hardware embodiment, complete software embodiment or combination software and hardware
Apply the form of example.Moreover, the present invention can use the computer for wherein including computer usable program code in one or more
The shape for the computer program product that usable storage medium is implemented on (including but is not limited to magnetic disk storage and optical memory etc.)
Formula.
The present invention is the flow with reference to method according to embodiments of the present invention, equipment (system) and computer program product
Figure and/or block diagram describe.It should be understood that can be by every first-class in computer program instructions implementation process figure and/or block diagram
Journey and/or the flow in square frame and flow chart and/or block diagram and/or the combination of square frame.These computer programs can be provided
The processors of all-purpose computer, special-purpose computer, Embedded Processor or other programmable data processing devices is instructed to produce
A raw machine so that produced by the instruction of computer or the computing device of other programmable data processing devices for real
The device for the function of being specified in present one flow of flow chart or one square frame of multiple flows and/or block diagram or multiple square frames.
These computer program instructions, which may be alternatively stored in, can guide computer or other programmable data processing devices with spy
Determine in the computer-readable memory that mode works so that the instruction being stored in the computer-readable memory, which produces, to be included referring to
Make the manufacture of device, the command device realize in one flow of flow chart or multiple flows and/or one square frame of block diagram or
The function of being specified in multiple square frames.
These computer program instructions can be also loaded into computer or other programmable data processing devices so that counted
Series of operation steps is performed on calculation machine or other programmable devices to produce computer implemented processing, so as in computer or
The instruction performed on other programmable devices is provided for realizing in one flow of flow chart or multiple flows and/or block diagram one
The step of function of being specified in individual square frame or multiple square frames.
Obviously, those skilled in the art can carry out the essence of various changes and modification without departing from the present invention to the present invention
God and scope.So, if these modifications and variations of the present invention belong to the scope of the claims in the present invention and its equivalent technologies
Within, then the present invention is also intended to comprising including these changes and modification.
Claims (10)
- A kind of 1. method that CSS display effects are realized in wechat webpage, it is characterised in that comprise the following steps：Click of the wechat webpage JavaScript script monitors to touch-screen；Click on the touch-screen；Obtain the DOM of touch location；Assignment is carried out for the class attributes of the DOM；The DOM shows CSS effects；Click away from；Perform and operated corresponding to the DOM.
- 2. according to the method for claim 1, it is characterised in that the class attributes include but is not limited to shade, suspension, Fillet, three-dimensional display effect.
- 3. according to the method for claim 1, it is characterised in that it is described to click on the touch-screen, further comprise：Maloperation is judged as to click of the time less than 100ms for touching screen.
- 4. the method according to claim 1 or 3, it is characterised in that CSS effects are not shown to the maloperation, not performed Operated corresponding to the DOM.
- 5. according to the method for claim 1, it is characterised in that the DOM shows CSS effects, further comprises：During clicking on screen, the continuously display CSS effects of DOM.
- 6. according to the method for claim 1, it is characterised in that if the time interval clicked away from is less than 100ms, DOM Continue to show CSS effects, and do not perform corresponding operation.
- 7. according to the method for claim 1, it is characterised in that further comprise：After clicking away from, the DOM shows CSS lasts 100ms time.
- 8. a kind of system that CSS display effects are realized in wechat webpage, it is characterised in that including clicking on control unit, display Control unit and display unit, wherein,Click on control unit to be used to judge click location, judge normal click or maloperation, and send click signal；Display control unit is used to receive the click signal, and sends display control signal, controls display effect；Display unit is used to receive the display control signal, and is shown.
- 9. system according to claim 8, it is characterised in that further comprise：Click on control unit DOM according to corresponding to determining click location；Display control unit and display unit show CSS effects to the corresponding DOM.
- 10. system according to claim 8, it is characterised in that further comprise：Click on control unit and judge whether click behavior is maloperation；In the case of maloperation, display control unit does not send display control signal.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201610450958.XA CN107526488A (en) | 2016-06-21 | 2016-06-21 | A kind of method and system that CSS display effects are realized in wechat webpage |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201610450958.XA CN107526488A (en) | 2016-06-21 | 2016-06-21 | A kind of method and system that CSS display effects are realized in wechat webpage |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN107526488A true CN107526488A (en) | 2017-12-29 |
Family
ID=60734994
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201610450958.XA Pending CN107526488A (en) | 2016-06-21 | 2016-06-21 | A kind of method and system that CSS display effects are realized in wechat webpage |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN107526488A (en) |
Citations (5)
| 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 (en) * | 2008-06-25 | 2009-12-30 | Lg电子株式会社 | Provide the sense of touch effect at mobile communication terminal |
| CN102890607A (en) * | 2012-03-12 | 2013-01-23 | 中兴通讯股份有限公司 | Screen display control method for terminal and terminal |
| CN103164163A (en) * | 2013-03-27 | 2013-06-19 | 东莞宇龙通信科技有限公司 | Display adjustment method and display adjustment device |
| CN103677542A (en) * | 2013-12-27 | 2014-03-26 | 乐视网信息技术（北京）股份有限公司 | Page rendering method and device |
-
2016
- 2016-06-21 CN CN201610450958.XA patent/CN107526488A/en active Pending
Patent Citations (5)
| 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 (en) * | 2008-06-25 | 2009-12-30 | Lg电子株式会社 | Provide the sense of touch effect at mobile communication terminal |
| CN102890607A (en) * | 2012-03-12 | 2013-01-23 | 中兴通讯股份有限公司 | Screen display control method for terminal and terminal |
| CN103164163A (en) * | 2013-03-27 | 2013-06-19 | 东莞宇龙通信科技有限公司 | Display adjustment method and display adjustment device |
| CN103677542A (en) * | 2013-12-27 | 2014-03-26 | 乐视网信息技术（北京）股份有限公司 | Page rendering method and device |
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 | |
| CA3088544A1 (en) | Website creation system for creating websites having at least one series of directional webpages and related methods | |
| WO2011040371A9 (en) | Object displacement method for a web page | |
| US20140180828A1 (en) | Information processing apparatus, information processing method, information processing program, and recording medium having stored therein information processing program | |
| WO2020215977A1 (en) | System, method and device for displaying information | |
| US11941653B2 (en) | Methods and systems for testing and applying codes to electronic shopping carts | |
| CN103098001A (en) | Processing method for user interface and electronic device | |
| CN103858121B (en) | Web applications are made to obtain the method and system of database change | |
| CN109615415B (en) | Advertisement previewing method and device | |
| CN107633426A (en) | Advertising message method for implantation and system based on environmental data | |
| US10217142B1 (en) | Selective solicitation of user feedback for digital goods markets | |
| KR20160108731A (en) | The method and apparatus for generating online shopping mall application and analyzing information on an access for the online shopping mall application | |
| TWI503736B (en) | Object control method, object control program and Web server | |
| TW201826204A (en) | Method for generating animated information and method for displaying animated information in user terminal, application and system for the same | |
| JP2018022298A (en) | Distribution device, distribution method, distribution program, and information display program | |
| CN105608610A (en) | Information push method and device | |
| JP5084902B2 (en) | Product information providing apparatus and method | |
| CN107526488A (en) | A kind of method and system that CSS display effects are realized in wechat webpage | |
| 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 (en) | A kind of method and system for replicating and pasting wechat web page contents | |
| CN107037960A (en) | The keyboard operation method and device serviced based on electric business | |
| KR20170137844A (en) | Web page creation support device, and storage medium | |
| Alam | Critical success factors of mobile commerce usage in higher learning institution in Malaysia |
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 |