Stack album effect, compatible with pc and mobile terminals, stacked pc

Source: Internet
Author: User

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.