Flex layout realizes the layout of NetEase Cloud player interface

This article introduces to you about the flex layout to achieve the layout of NetEase Cloud player interface, there is a certain reference value, there is a need for friends to refer to, I hope you have some help.

Today we go into the details of the project, to say that each person who cut the figure around the snag, but also jser must face a routine task-"NetEase cloud music high-reuse response carousel Map Implementation"

The carousel diagram is just as important and winding up as the first time you go to your girlfriend's home for work. Unfortunately, most of the people who write the carousel have no experience like the first time they see a parent.

Many people want to write a set of their own carousel map, and then continue to improve the work in the end to form their own plug-in library, it is regrettable that most people have this idea, to the action of the time only found that want to achieve it, than to cash the "wedding to buy suites" promises are difficult. Finally had to be forced by the project pressure and self-skill level, into a plug-in porter.

However, the plug-in Porter has three questions, first of all, this thing on a person's technical growth of no use, followed by the focus, plug-ins do not fully meet the project needs, and no ability to carry out two times, encounter the strange bug can only be resigned, continue to find a more appropriate plugin slowly journey. Finally, some plugins are heavy and bloated, but all you need is the most basic carousel functionality. Would you like to eat a dish of vinegar, specially wrapped in dumplings? I don't think so. So why do you use a hundreds of K or even m plugin in your project just to use a carousel diagram?

Many people may say because can not write, good, today we come to realize one, you will find that the original JS world so simple and beautiful, there is a plug-in to find the Kungfu, you can develop 8 plug-ins.

Look up, we all recognize what is called the Carousel diagram, carefully look at your first step to do at least say I dragged a thing to move, even a red square. Here you have to say drag, drag and drop change is nothing but left and top values (aliens just change right and bottom, we people generally use left and top, don't ask me why), first let him move in one direction.

<! DOCTYPE html>
Look carefully, nothing is to use the mobile side of the event, minutes to understand, the problem is a lot of students will say, teacher, I do not understand here, this is what,

var currpoint = E.changedtouches[0].pagex; var newleft  = currpoint-disx; op.style.left = newleft + ' px ';
What is this again?

var currpoint = E.changedtouches[0].pagex;var Newleft  = Currpoint-disx;op.style.left = newleft + ' px '; o P.addeventlistener ("Touchmove", Doup,false); Op.addeventlistener ("Touchend", Doup,false);
In fact, these are the core content, simply said is a picture, very simple diagram, you can understand a look. 


In fact, the distance between the blue Line as long as the blue line is correct, the position is wrong, if you can not understand it is OK, you put him as a formula to remember a little trouble. With these basics, it's good to have a shelf,

<! DOCTYPE html>
At least now a drag-and-drop, here simple, even if the portrait is not considered, the carousel is simpler than drag, only consider the horizontal direction,

The problem is to let go after the carousel, each of the items did not get to the right position, what is called the correct position, in fact, each change of the left value will be good is a carousel width of the map.


You forget about the other, look at the red box is the phone screen width, each time is actually moving a lattice. Then I'll just set a Inow value record to move a few grids, as long as the inow correct everything OK, say dry on dry.

<! DOCTYPE html>
Stress a little, getboundingclientrect (), why am I useless offsetleft here? Because the actual project is not possible to rotate the outer layer of the map, or in case there is margin, padding, the distance of the carousel is not right, the use of offsetleft is not the practicality of the project, do the demonstration is OK, the actual project so write on the waste.

Finally, I said an infinite carousel map, in fact, is counted the number,!

The so-called infinite carousel principle, that is, when Inow equals the rightmost 0, pull back to the red box position, the left side is when Inow equals the leftmost 4, Inow equals 6.

A lot of people have the source code to ignore the basic learning, directly take the past, that with the direct find plug-in no difference, so this is a little practice it.

Four exercises:

1. Implement multi-screen corresponding adaptation

2. Implement Wireless Carousel

3. If the sliding distance is not more than 50px, the next one will not be sown.

4. Implement timer Auto-carousel!


Here I put the above four practice solution to the left side of the code as a hint, everyone try to learn to achieve.