CSS3-----Picture Page Turn effect display

Source: Internet
Author: User

In the process of developing a Web site a variety of page effects are countless, here I will introduce a simple method is to use the rotation of CSS3 to achieve this common effect;

The display results are as follows:

The first is the layout of the page, not so complicated;

The href attribute of a tag, which generally points to a URL address, can also be called JavaScript, such as href= "javascript:xxx ();", but this is recommended in the documentation <a href= "http:// Www.111cn.net/zhongxing/U880/javascript:void (0) "onclick=" xxx (); " >xx</a> But this method sometimes produces strange problems in complex environments, try not to use the Javescript: protocol as the HREF attribute, which not only leads to unnecessary triggering of window.onbeforeunload events. In IE, the animated GIF picture will stop playing.

The linked onclick event is executed first, followed by the action under the Herf property, and if you do not want to perform the action under the HREF attribute, the onclick needs to be returned, generally written as: onclick= "xxx (); return false;".

The href attribute of the A tag and the priority level of the OnClick event:

(1) Order: IE 6:href trigger after the onclick, other browsers trigger the Onlick after the first trigger href

(2) href= "javascript:xxx ()" cannot pass in this as a parameter, The onclick can, for example: <a href= "Javascript:alert (' href event ');" onclick= "clickevent (this);" >

(3) The priority trigger method if the return false causes the latter event to not be triggered, for example: <a href= "Javascript:alert (' href event ');" onclick= "clickevent (this); return false; " >

(4) <a href= "#" > will cause the page to be anchored to the bookmark location

(5) for reasons of 1 and 4, <a href= "#" and "IE6" at the same time because the page was re-loaded by the HREF first, causing the onclick event to be discarded by the browser

Summarize:

(1) When a method that does not need to pass in this as a parameter, it is recommended to use only href= "JavaScript:"

(2) If you need to use this parameter, it is recommended to use <a href= "javascript:void (0);" onclick= "dosomthing (This)" >

There is no need to pass this as the method parameter, so I use: Javascript:next (), and the picture to switch the JS is as follows;

In the picture to flip, we need to make a judgment, if not added to the judgment will make carindex more than or less than the number of pictures;

CSS3-----Picture Page Turn effect display

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.