Using the H5 page of Hammer. js to develop some DOM novel methods,

Using the H5 page of Hammer. js to develop some DOM novel methods,

A few days ago, a friend told me to help him write a carousel image on the mobile terminal. I generally don't take private work. After all, I usually work on a single and double break, and I don't have much time.

Maybe most Programmers spend more time watching news, playing games, or learning new knowledge and lack of exercise.

Therefore, I personally feel that you can exercise or learn new knowledge at the time of private activity. Of course, these are opinions. It doesn't mean that you have the same opinion as me. Okay, but since I was a friend and I used to be a classmate, isn't it a carousel image? I have also written some articles on mobile terminals. Carousel images are the most common advertisement display function on mobile terminals.

However, when my friend gave me a general high speed of demand, it had nothing to do with carousel images. No, it was just a dime, because his demand was to help him write a small game.

The game content is roughly, the user registers, selects, then enters the selection question category, then gives the user a prompt, then enters the question preview, the user previews five questions, the question is an English word, with three Chinese characters, the user can slide to select the answer. After reading the preview question, the user can click the button to enter the answer mode. When a user answers a question, the user's right and wrong are counted. After the user answers the question, the user's correct answers will be counted. That is, to publish the correct answer. After the user is given points, return to the initial Page and start the game.

After the requirement is finished, do you feel the relationship between a dry carousel image? Yes, each time you go to the next page, it is 0 0 when the carousel goes to the next page! Hey, that's not counted.

Next, we constructed the DOM structure for the game and started to write JS after the game was built.

Here we use a lightweight gesture library that relies on Jquery. js. You may ask why zepto is not used. I will not explain it here. In short, I have heard a lot. Hammer. js supports the following gesture features and provides a brief introduction:

Tap finger click cannot exceed 250 m

Press finger to Press more than 500 m

The pan finger slides to the top, including the start of the sliding, and the top 3 are like native ontouchstart ontoumove ontouchend;

Swipe quick slide, including swipeleft quick slide swiperight quick right slide, etc.

Zoom-in and zoom-out gesture with two Pinch fingers

Rotate 2 fingers

　　

To use it, you must first use the new constructor, such as var $ obj = new Hammer (element );

Element is the DOM object to be passed in, but Hammer. one disadvantage of js is that you cannot bind events to multiple DOM elements at a time. That is to say, each new DOM object can only be one, so element can only be one DOM element, not a group, for example: $ ('# obj') [0]

Then, you can use its encapsulated event binding functions, such as on and off. More attribute methods can be used to create an object, and then the console. log ($ obj); is displayed.

The following describes the DOM structure ,:

　　

For example, the current slide requires DOM3 to be displaced, transform: translate (x, y, z );

In general, we may bind events to DOM3, but after you bind them, shift them to-1000px, now, your finger position is not calculated based on the current position of the screen, but calculated based on the current position of the element, which may be a little troublesome. You may say that you just need to bind the event to DOM1. After obtaining the value, you can shift it to DOM3. Then, how to operate your finger on DOM1 is also the original position. That's right. I did the same, but it just brought me trouble. In many cases, events are not triggered, or two operations are required to be triggered. why?

This may be the difference in the event mechanism of mobile terminals. elements cannot bubble up to the parent level in time. Due to device restrictions, this issue cannot be triggered by the chrome simulator. We will try another way to test and debug the problem next time. However, the problem above is no problem in the built-in browser, and there are problems in other browsers, including chrome APP and browser that comes with apple

Therefore, we try our best to bind events to the innermost DOM to reduce our chances of getting rid of pitfalls.

Finally, it took me two days to complete the game.

Let's talk about the poor support of some well-known apps. For example, Firefox desktop browsers are good. As a Web programmer, they all know, but few apps support it, even obtaining the screen size may be wrong, so the browser I basically tested is only the browser that comes with Apple versions, QQ built-in browser, built-in browser, and UC browser, I have another QQ browser.

However, I believe that many apps can support more slowly, but I hope that the pace will be faster.

 

 

 

 

Poor literary talent, the article should only communicate with their own records. Thank you.