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
- Filter: alpha (opacity = 60 );
- -Moz-opacity: 0.6;
- 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