Stack album effect, compatible with pc and mobile terminals, stacked pc
On the mobile phone end, stacked album effects are a common image display method. Each person's ideas may be different and their implementation methods are different.
This blog is mainly used to share my implementation methods. You are welcome to make suggestions and point out my shortcomings. 3Q first ~
Let's take a look at the final:
Analysis of ideas and principles:
1. layout problems. By default, five misplaced images are displayed, and the remaining images are hidden behind the Fifth picture. The dislocation uses the transform attribute of css3. The rotate attribute value is used to rotate the displayed five images differently.
2. js implementation issues.
(1) Determine whether the mobile and pc are compatible with mouse or touch events.
(2) sliding action. The sliding distance can be determined within a certain range.
(3) After switching images, move the first slide to the end of the image queue and display them cyclically. During this process, you must note the index value and the animation that is displayed and disappears.
Through the above rough analysis, this stacked album is easy to implement and has no difficulties.
For future convenience, jq is combined and written into the jquery plug-in form. Finally, you can bind the function of this plug-in with dom.
Code for the entire project: http://pan.baidu.com/s/1bnfMhAZ
The specific code is not pasted up. You can download the code and view it. The code is implemented based on the above ideas.