>>0
・Firefox、Safari、そして今や Opera ですら CSS3 の opacity を実装するこの時代、IE 独自拡張の filter しか使わないのは何故。
・IE の filter は ActiveX を使っているので、必ず try...catch すること。
> 最初は何も表示されない状態で、徐々に画像を浮かび上がらせたい
最初に白紙画像でも指定するのが一番簡単だと思う。
やっつけ。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>TEST</title>
<script type="text/javascript">
/*@cc_on @if (@_jscript) attachEvent ('on' + @else@*/ addEventListener (/*@end@*/ 'load', function () {
/************************************************************************/
function FadeOut () {
arguments.callee.prototype.handleTimer ();
return arguments.callee;
}
FadeOut.init = function (node) {
/*@if (@_jscript)
var style = node.currentStyle;
@else@*/
var style = document.defaultView.getComputedStyle (node, null);
/*@end@*/
if (style.position == 'static') node.style.position = 'relative';
var nodes = node.getElementsByTagName ('li');
for (var i = 0, I = nodes.length; i < I; i++) {
nodes[i].style.position = 'absolute';
nodes[i].style.left = 0 + 'px';
nodes[i].style.top = 0 + 'px';
nodes[i].style.zIndex = (I - i) + '';
nodes[i].style.visibility = 'hidden';
}
this.prototype.elements = nodes;
setTimeout (FadeOut, this.prototype.startTimeout);
};
FadeOut.prototype = {
maxOpacity : 100,
currentOpacity : 0,
currentIndex : 0,
opacityDecrement : 10,
opacityTimeout : 50,
switchTimeout : 1000,
startTimeout : 2000,
maxLoop : 5,
currentLoop : 0,
elements : null,
state : 'fadeIn',
handleTimer : function () {
this[this.state].call (this);
},
fadeIn : function () {
if (this.currentOpacity < 100) {
this.elements[this.currentIndex].style.visibility = 'visible';
this.currentOpacity += this.opacityDecrement;
this.setOpacity (this.elements[this.currentIndex], this.currentOpacity);
setTimeout (FadeOut, this.opacityTimeout);
} else {
for (var i = 0, I = this.elements.length; i < I; i++) {
this.elements[i].style.visibility = 'visible';
}
this.state = 'fadeOut';
setTimeout (FadeOut, this.switchTimeout);
}
},
fadeOut : function () {
if (this.currentOpacity >= 0) {
this.currentOpacity -= this.opacityDecrement;
this.setOpacity (this.elements[this.currentIndex], this.currentOpacity);
setTimeout (FadeOut, this.opacityTimeout);
} else {
for (var i = 0, I = this.elements.length; i < I; i++) {
this.elements[i].style.zIndex = ((I - i) + this.currentIndex) % I;
}
this.currentOpacity = this.maxOpacity;
this.setOpacity (this.elements[this.currentIndex], this.currentOpacity);
this.currentIndex = (this.currentIndex + 1) % I;
if (this.currentIndex != 0
|| this.maxLoop == 0
|| this.maxLoop > ++this.currentLoop
) {
setTimeout (FadeOut, this.switchTimeout);
}
}
},
setOpacity : function (node, opacity) {
/*@if (@_jscript)
try { node.style.filter = 'Alpha(opacity=' + opacity + ')'; } catch (err) { ; }
@else@*/
node.style.opacity = opacity / 100;
/*@end@*/
}
};
FadeOut.init (document.getElementsByTagName ('ul')[0]);
/************************************************************************/
}, false);
</script>
<ul>
<li><img src="sample1.jpg" alt="*"></li>
<li><img src="sample2.jpg" alt="*"></li>
<li><img src="sample3.jpg" alt="*"></li>
<li><img src="sample4.jpg" alt="*"></li>
<li><img src="sample5.jpg" alt="*"></li>
</ul>
