Page 107-H5 Tutorial Programming Tutorials: Learn H5 Tutorial Online-php.cn

Article Tags

H5 Tutorial

Home

Technical articles

Web Front-end

H5 Tutorial

Detailed explanation of the sample code for making an unlimited number of banner buttons on the H5 mobile terminal

Make an unlimited number of banner buttons in mobile H5 by FungLeo Preface: Some banner buttons are often needed on mobile h5 pages. Of course, making a banner button is very simple. However, product managers and Designers will always give you some trouble. For example, the buttons are obviously in the same format, but here it is a button for a banner. When you go down, it becomes a banner that requires two buttons. When you enter the inner page, there are three buttons squeezed in. On a banner. If there is no reasonable solution, then it is undoubtedly very disgusting. Because we have to write multiple styles. And we

Mar 10, 2017 pm 04:49 PM

H5，移动端，通栏按钮

How to create various lists on H5 mobile terminal (seven final chapters)

How to Make Various Lists in Mobile H5 (Seven Final Chapters) by FungLeo Review the learning address of the first five chapters: "How to Make Various Lists in Mobile H5 (1)" "Mobile H5 How to create various lists (2)" "How to create various lists on mobile H5 (3)" "How to create various lists on mobile H5 (4)" "Mobile How to make various lists in H5 (5)》 "How to make various lists in H5 on mobile (6)" If you saw it first

Mar 10, 2017 pm 04:46 PM

HTML5，移动端，列表

How to make various lists on H5 mobile terminal (6)

In the previous two chapters, we talked about two-column layout of picture and text lists. In fact, two-column layout of picture and text lists is relatively simple. In this chapter, we will go one step further to challenge the difficulty. To achieve a relatively Say, a very complicated layout.

Mar 10, 2017 pm 04:44 PM

HTML5，移动端，列表

How to make various lists on H5 mobile terminal (5)

In Chapter 4, we learned how to make a two-column picture and text list. However, this picture and text list has certain limitations. The limitation is that the pictures must be square.

Mar 10, 2017 pm 04:42 PM

HTML5，移动端，列表

Detailed explanation of how to make various lists on H5 mobile terminal (4)

The first three chapters all talk about how to implement an ordinary list. The difficulty ranges from easy to difficult, but in general, you can master it at a glance. In this chapter, we will make a list with pictures and texts. Two columns of pictures and texts Lists are very common. In e-commerce mobile terminals such as JD\TB, H5 is everywhere. Here, let’s make the simplest one first.

Mar 10, 2017 pm 04:39 PM

HTML5，移动端，列表

How to make various lists on H5 mobile terminal (2)

Methods for making various lists on the mobile terminal (2) Review of the past situation In the previous blog post "How to make various lists on the mobile terminal (1)", we demonstrated through two simple DEMOs Let’s take a look at list creation in mobile H5. However, these two demonstrations are still too simple. Maybe you think they are nothing more than that. In this chapter, we will make a slightly more complex list. If you saw this first article, it is recommended that you go to the link above and read the corresponding content first, so that the context is coherent and it is easier to understand the content of this article. Bring the right arrow.

Mar 10, 2017 pm 04:31 PM

HTML5，移动端，列表

How to make various lists on H5 mobile terminal (1)

Methods for making various lists on the mobile terminal (1) by FungLeo Preface With the development of the mobile Internet, a large number of front-end personnel have transferred from the PC terminal to the mobile terminal. And a lot of PC-side front-end experience is not applicable to the mobile terminal. A few days ago A blog post I wrote "Summary of Some Basic Knowledge Points of Mobile H5" received a lot of clicks. Therefore, FungLeo decided that in the next time, I will launch a series of tutorials around the mobile terminal. This series The CSS part of the article will all be written in SASS syntax. If you don’t know SASS, it is recommended to read the relevant tutorials

Mar 10, 2017 pm 04:28 PM

HTML5，移动端，列表

Implementation of HTML5/CSS3 web page loading progress bar, download progress bar and other classic cases

Today I bring you a cool progress bar. The progress bar gives users a better experience in a time-consuming operation. It will not make users feel like they are waiting blindly. For long-term waits without progress bar, users will have their tasks freeze. Don't hesitate to close the application; it is generally used for downloading tasks, deleting a large number of tasks, loading web pages, etc.; if you use HTML5 for mobile phone layout, it can also be used on mobile phones ~ Effect diagram: 1. HTML structure:

Mar 10, 2017 pm 04:15 PM

HTML5，CSS3 ，进度条

Classic case of HTML5/CSS3 3D cube rotation animation

In the previous 3D product display, we have already talked about how to make a cube, and there are numbers on it. Theoretically, it is more complicated than this, although it is not so dazzling ~ I won’t go into details here.

Mar 10, 2017 pm 04:13 PM

HTML5，CSS3 ，3D立方体旋转

HTML5/CSS3 special topic canvas simulation to implement electronic lottery scratch-off sample code (picture)

Today I will bring you a small example of a scratch-off game~ It is based on HTML5 canvas. If you are interested, you can change it to the android version, or other~ Rendering: Post a photo of me winning 5 million, what should I do, how to spend it~ Okay Now, let’s start with the principle: 1. There are two Canvas in the scratch area, one is front and one is back, and the front covers the canvas below. 2. The canvas is filled with a rectangle by default, cover the canvas rendering below, and then monitor

Mar 10, 2017 pm 04:06 PM

HTML5，CSS3，canvas

HTML5/CSS3 Special Topic Classic Case of 3D Display of Product Information

Strengthen the usage of perspective and transform:translateZ. The traditional product display may not attract the user's attention very well, but if you add appropriate 3D elements to the display, ~ maybe the effect will be good ~ Rendering: To explain: This idea is not what I thought, ha ~ imitation Other people's ideas should be from w3cplus. Of course, the point is to teach you how to do it, let’s treat it as a high imitation~ First of all, let’s teach you how to use CSS3 to make a cube: There is no CSS here

Mar 10, 2017 pm 03:55 PM

HTML5，CSS3，3D展示商品

HTML5/CSS3 Special Topic CSS3 creates a classic case of Baidu Tieba's 3D flop effect

First of all, thank you to the teacher of w3cfuns~ Today I will bring you a flip effect made by CSS3. When you move the mouse over an element, you can feel that you can see the information behind the element. If you make Lianliankan, poker-type games that test your memory, or even write some words to your girlfriend, you can try it after putting it in the photo album made using this example. Ha~ Rendering: Some CSS3 used in the example New attributes: a. -webkit-perspective: 800px; perspective

Mar 10, 2017 pm 03:44 PM

HTML5，CSS3，3D翻牌效果

Tempting examples of HTML5/CSS3 - Detailed explanation of imitating Youku video screenshot function

For general video websites, after the user uploads the video, they can take a screenshot of the played video and then use it as a display image of the video. Such a function can also be introduced in the project to give users a good experience, instead of asking users to upload an additional display picture. Rendering: It still looks very good. Let me analyze it for you. The core code is very simple: _canvas = document.createElement(canvas);_ctx = _canvas.getConte

Mar 09, 2017 pm 04:42 PM

HTML5，CSS3 ，视频截图

HTML5/CSS3 classic case - drag and drop to upload images without plug-in (2)

The previous article has implemented the overall HTML and CSS of this project: HTML5 CSS3 Classic case: Drag and drop to upload images without plug-ins (supports preview and batch) (1) This blog is directly based on the previous article. The final effect is: Rendering 1: Rendering 2: Okay, please allow me to post the image twice so that everyone can see the effect~ It can be seen that the html of the li of our image is actually quite complicated, so I made the html document Some modifications:

Mar 09, 2017 pm 04:38 PM

HTML5，CSS3 ，上传图片