Thoughts on opacity

Source: Internet
Author: User

Today, when encapsulating the image carousel plug-in, we came up with a little bit of opacity thinking.

My idea of this carousel is not to set the outer container overflow as hidden on the official website of the Baidu input method, and set position as relative to define a cycle time using setinterval, and then change the top value according to the picture height.

Instead, the opacity is used to switch to display the corresponding image.

 

Here, let's talk about the opacity compatibility.

 

CSS code  
  1. Filter: alpha (opacity = 60 );
  2. -Moz-opacity: 0.6;
  3. Opacity: 0.6

 

We know that you still need to render the index when designing the carousel (the badge of the right or the left small corner, as for click switch or move the mouse to switch this, you design ), as long as the correspondence is met-the cur index is displayed on the control during each carousel switch. (I suggest you click or move the mouse in and then restart the calculation for cleartimeout.)

 

1. If you have read W3C documents, you will know (for IE only ),

Filter attributesAllow us to add style effects to texts and images(PS:Note that the filter attribute is used. always specify the element width.)

In the past, when someone else wrote IE6 and IE7 To Set opacity, this element must be "layout" (that is, setting the width and adding the position strictly)

 

2.-moz-opacity: attribute is used to be compatible with earlier versions of Mozilla. It is said that ff0.9 no longer requires this attribute. My FF3.6.23The opacity attribute is displayed.

 

3. Some people may think of this-khtml-Opacity attribute. I didn't add it here, because it is said that safari 1.x needs to be compatible.

 

This article briefly introduces opacity.

The plug-in is done, leaving a problem on its own. Many people perform plug-in encapsulation like a page with only one dom parent. How many things are rendered? Or add the outline or flesh-and-blood of the parent, and the script only controls the operation .......

 

 

Paste a compatible graph:

 

 

Thoughts on opacity

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.