[ javascript ] 司徒正美的fadeOut-fadeIn成效
日期：2014-05-16 浏览次数：20424 次
[ javascript ] 司徒正美的fadeOut-fadeIn效果!
首先感谢司徒正美的文章!
在司徒大神的博客看到一个简单的渐入渐出的效果，完全采用js实现。
如下：
<!doctype html>
<html dir="ltr" lang="zh-CN" >
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=8">
<title>相册</title>
</head>
<body>
<div id="album" >
<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/202906/t_type1.jpg" />
<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/202906/t_type2.jpg" />
<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/202906/t_type3.jpg" />
<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/202906/t_type4.jpg" />
</div>
<style type="text/css">
#album{
position:relative;
border:10px solid #000;
width:85px;
height:120px;
overflow:hidden;
}
#album img{
position:absolute;
top:0;
left:0;
opacity:0;
filter:alpha(opacity=0);
}
</style>
<script type="text/javascript">
var album = function(el){
var node = (typeof el == "string")? document.getElementById(el):el;
var images = node.getElementsByTagName("img");
var length = images.length;
for(var i=1;i<length;i++){
images[i].opacity = 0;//为所有图片设置一个自定义属性opacity
}
images[0].opacity = 0.99;
images[0].style.display = "block";
var current = 0;
(function(){
setTimeout(function(){
var cOpacity = images[current].opacity,
next = images[current+1]?current+1:0;//下一张图片的索引，如果没有就回到第一张
var nOpacity = images[next].opacity;
cOpacity-=.05;
nOpacity+=.05;
images[current].opacity = cOpacity;
images[next].opacity = nOpacity;
images[next].style.display = "block";//确保肯定有一张图片是可见的
setOpacity(images[current]);
setOpacity(images[next]);
if(cOpacity<=0) {
images[current].style.display = "none";
current = next;
setTimeout(arguments.callee,1000);
}else{
setTimeout(arguments.callee,50);
}
},100);
})()
}
var setOpacity =function(obj) {
if(obj.opacity>.99) {
obj.opacity = .99;
}
obj.style.opacity = obj.opacity;
obj.style.filter = "alpha(opacity=" + (obj.opacity*100) + ")";
}
window.onload = function(){
var el = document.getElementById("album");
album(el);
}
</script>
<p>请稍等4秒………………</p>
</body>
</html>
我一直很明白，为什么这里的图片的效果一定需要等待4秒才会出现。于是，研究之，
发现，原来一切都是由于positon所造成的。由于定位是采用的absolute,所以导致了，最后一张图片会覆盖前面的图片。
那么在改变前面的图片的opacity的时候，所有的效果都会被最后的一张图给挡住.
如需要改变这种情况，只需要在初始化的时候，将所有的图的opacity都重置为0.
如下：
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
