GradientWipeÝ®e©Ê¡GIE5.5+
»yªk¡G
filter : progid:DXImageTransform.Microsoft.GradientWipe ( enabled=bEnabled , duration=fDuration , gradientSize=fGradientWidth , motion=sMotion )
ÄÝ©Ê¡G
enabled | :’Â |
¥i¿ï¶µ¡C¥¬º¸È(Boolean)¡C³]¸m©ÎÀ˯ÁÂoÃè¬O§_¿E¬¡¡Ctrue | false
true | :’ | Àq»{È¡CÂoÃè¿E¬¡¡C |
false | :’ | ÂoÃè³Q¸T¤î¡C |
|
duration | :’Â |
¥i¿ï¶µ¡C¯BÂI¼Æ(Real)¡C³]¸m©ÎÀ˯ÁÂà´«§¹¦¨©Ò¥Îªº®É¶¡¡C¨äȬ°¬í.²@¬í(0.0000)®æ¦¡¡C
§A¥i¥H¨Ï¥Î play ¤èªkªº iDuration °Ñ¼Æ³]¸mÂà´«¦^©ñªº«ùÄò®É¶¡¡CµM¦Ó¡A·í§A¤@¥¹½Õ¥Î¤F play ¤èªk¡A¦b¦^©ñ«ùÄò¹Lµ{¤¤ Duration ¯S©Ê´NÅܬ°¥uŪ¯S©Ê¡C
|
gradientSize | :’Â |
¥i¿ï¶µ¡C¯BÂI¼Æ(Real)¡C³]¸m©ÎÀ˯Á¹ï¹³¤º®e³Q±è«×º¥Áô±øÂл\ªº¦Ê¤À¤ñ¡C¨úȽd³ò¬° 0.0 - 1.0 ¡CÀq»{Ȭ° 0.25 ¡C
|
motion | :’Â |
¥i¿ï¶µ¡C¦r²Å¦ê(String)¡C³]¸m©ÎÀ˯Á¹ï¹³¤º®e¥X²{ªº¤è¦V¬O¨Ì¾Ú WipeStyle ¯S©Êªº³]©w¡AÁÙ¬O¨ú¤Ï¡Cforward | reverse
forward | :’ | Àq»{È¡C¹ï¹³¤º®e¨Ì¾Ú WipeStyle ¯S©Ê³]©wªº¬y¦V¥X²{¡C |
reverse | :’ | ¹ï¹³¤º®e¨Ì¾Ú WipeStyle ¯S©Ê³]©wªº¬y¦Vªº¤Ï¤è¦V¥X²{¡C |
|
¯S©Ê¡G
Enabled | :’ | ¥iŪ¼g¡C¥¬º¸È(Boolean)¡C°Ñ¾\ enabled ÄÝ©Ê¡C |
Duration | :’ | ¥iŪ¼g¡C¯BÂI¼Æ(Real)¡C°Ñ¾\ duration ÄÝ©Ê¡C |
GradientSize | :’ | ¥iŪ¼g¡C¯BÂI¼Æ(Real)¡C°Ñ¾\ gradientSize ÄÝ©Ê¡C |
Motion | :’ | ¥iŪ¼g¡C¦r²Å¦ê(String)¡C°Ñ¾\ motion ÄÝ©Ê¡C |
WipeStyle | :’ | ¥iŪ¼g¡C¦r²Å¦ê(String)¡C0 | 1
0 | :’ | Àq»{È¡CÂà´«¦b¤ô¥¤è¦V¤W¦Û¥ª¦Ü¥k¡C |
1 | :’ | Âà´«¦b««ª½¤è¦V¤W¦Û¤W¦Ü¤U¡C |
|
Percent | :’ | ¥iŪ¼g¡C¦r²Å¦ê(String)¡C³]¸m©ÎÀ˯Á·í«eÀRºAÂoÃè¿é¥X¦bÂà´«¶iµ{¤¤©Ò³BªºÂI¡C¨úȽd³ò¬° 0 - 100 ¡CÀq»{Ȭ° 0 ¡AÂà´«©|¥¼¶}©l¡C 100 ¬°Âà´«§¹¦¨¡C
¦¹¯S©Ê¥i¥Î©ó¨Ï¥ÎÂà´«ÂoÃè«Ø¥ßÀRºAÂoÃè®ÄªG¡C³]¸m¨äȵ¥©ó©w¸q¤FÂà´«¶iµ{°±¤îªºÂI¡C¨Ï¥ÎÂà´«ÂoÃè«Ø¥ßÀRºAÂoÃè®ÄªG¥i¿í´`¥H¤U¨BÆJ¡G
- ¨Ï¥ÎÂà´«ÂoÃ誺 apply ¤èªk¡C³o±N®·Àò¹ï¹³¤º®eªºªì©lÅã¥Ü¡A³]¸m Percent ¯S©ÊȬ° 0 ¡C
- §ïÅܹﹳ¤º®e¡C¦p visibility ¡A innerText ¡A background-color ¡A border ¡A©ÎªÌ¨ä¤l¹ï¶HªºÄÝ©Ê¡C
- ³]¸mÂà´«ÂoÃ誺 Percent ¯S©Ê¡C§Y½T©w§A§Æ±æªºÂà´«¶iµ{¤¤¬Y¤@ÂI¡C³o±N®·Àò¨ìÂà´«¶iµ{¤¤¦b¸ÓÂI³Bªº¤@±i¤º®e¹Ï¹³¡C
- ³]¸mÂà´«ÂoÃ誺 Enabled ¯S©ÊȬ° true ¡C«hÂoÃè§@¥Îªº¹ï¶H±N¨Ì¾ÚÀò¨ú¨ìªº¹Ï¹³§ó·s¨ä¤º®e¡C
½Ðª`·N¡G§A¥u¯à¨Ï¥Î visibility ÄݩʨӧïÅܹï¶Hªº¤l¹ï¶H¡C§_«h¡A¹ï¤l¹ï¶Hªºª½±µ§ïÅÜ·|³Q¥ß§YÅã¥Ü¥X¨Ó¡A¦Ó¤£·|³QÂà´«ÂoÃè®·Àò¡C
|
status | :’ | ¥uŪ¡C¾ã¼ÆÈ(Integer)¡CÀ˯ÁÂà´«ªº·í«eª¬ºA¡C0 | 1 | 2
0 | :’ | Âà´«°±¤î(stop)¡C |
1 | :’ | Âà´«³QÀ³¥Î(apply)¡C |
2 | :’ | Âà´«¦b¶i¦æ(play)¡C |
|
¤èªk¡G
apply | :’Â |
®·Àò¹ï¹³¤º®eªºªì©lÅã¥Ü¡A¬°Âà´«°µ¥²nªº·Ç³Æ¡CµLªð¦^È¡C
·í¦¹¤èªk¤@¥¹³Q½Õ¥Î«á¡A¹ï¹³Äݩʪº¥ô¦ó§ïÅܳ£¤£·|³QÅã¥Ü¡Aª½¨ì§A½Õ¥Î play ¤èªk¶}©lÂà´«¡C
½Ðª`·N¡G§A¥u¯à¨Ï¥Î visibility ÄݩʨӧïÅܹï¶Hªº¤l¹ï¶H¡C§_«h¡A¹ï¤l¹ï¶Hªºª½±µ§ïÅÜ·|³Q¥ß§YÅã¥Ü¥X¨Ó¡A¦Ó¤£·|³QÂà´«ÂoÃè®·Àò¡C
·í§A½Õ¥Î play ¤èªk®É¡AÂà´«§e²{¥X¤º®eªºÅܤƵ²ªG(¹ï¶HªºÄÝ©Ê©M¤l¹ï¶Hªº visibility Äݩʪº§ïÅÜ)¡C
|
play ( iDuration ) | :’Â |
¶}©lÂà´«¡CµLªð¦^È¡C°Ñ¼Æ¨£¤Uªí¡C
iDuration | :’ | ¥i¿ï¶µ¡C¯BÂI¼Æ(Real)¡C «ü©wÂoÃè§@¥Î«ùÄòªº®É¶¡¡CÀq»{³æ¦ì¬°¬í¡C
¨Ï¥Î play ¤èªkªº iDuration °Ñ¼Æ³]¸mÂà´«¦^©ñªº«ùÄò®É¶¡¡A¨äȦbÂà´«ªº·í«e¤@Ó¶g´Á¤º·|´À´« Duration Äݩʪº³]¸m¡C¦ý¬O¤U¤@¦¸Âà´«·|«ì´_¨Ï¥Î Duration Äݩʳ]¸mªºÈ¡C |
|
stop | :’Â |
°±¤îÂà´«¦^©ñ¡C¨Ã§e²{Âà´«µ²ªG¹Ï¹³¡C¦P®É¿Eµo onfilterchange ¨Æ¥ó¡CµLªð¦^È¡C
|
»¡©ú¡G
¥Îºu°Êº¥Áô®ÄªGÂà´«¹ï¹³¤º®e¡C
¥Ü¨Ò¡G
#idDiv{height:250px; width:250px; background-color: orange; filter:progid:DXImageTransform.Microsoft.gradientWipe(duration=3, gradientsize=0.5);}