Stack album effects, compatible with PC and mobile

Source: Internet
Author: User

On the phone side, the stacked effect of the album is a more common way to display pictures, everyone's ideas may be some different, the way to achieve different.

This blog is mainly to share my implementation of the method, you are welcome to make suggestions, point out my shortcomings, first 3Q ~


Let's look at the final:


Thinking and Principle analysis:

1, the first is the layout of the problem. By default, five misplaced images are displayed, and the rest of the pictures are obscured by the fifth picture behind. Dislocation uses the transform attribute of the CSS3, using the Rotate attribute value to perform a different rotation on the displayed five images.

2, JS implementation of the problem.

(1) Determine the mobile and PC side, compatible with the use of mouse events or touch events

(2) Slide action, add sliding distance to judge, in a range of effective

(3) Picture switch, the first slide to move to the end of the picture queue, the loop display, the process, you need to be aware of the value of the index, as well as the display and disappearance of the animation


Through the above analysis, this stacked album is not difficult to achieve, easy to achieve.

For later convenience, combined with JQ, written in the form of jquery plug-in, and finally use the DOM binding the plug-in function.


Code for the entire project: Http://pan.baidu.com/s/1bnfMhAZ


The specific code is not posted, you can download the code after the review. Code is based on the above ideas to achieve.

Stack album effects, compatible with PC and mobile

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.