JavaScript 淡入淡出相册特效代码－站长资讯网info110.com

不知题目是否妥当，总之就是在相册中使用fade效果，让图片切换变得非常自然舒服。
1.<div id="album"> 
2.  <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/202906/t_type1.jpg" /> 
3.  <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/202906/t_type2.jpg" /> 
4.  <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/202906/t_type3.jpg" /> 
5.  <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/202906/t_type4.jpg" /> 
6.</div>
<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>
添加样式，目标是让所有图片像叠罗汉一样摞在一起。
01.#album{ 
02.  position:relative; 
03.  border:10px solid #000; 
04.  width:90px; 
05.  height:120px; 
06.  overflow:hidden; 
07.} 
08.#album img{ 
09.  position:absolute; 
10.  top:0; 
11.  left:0; 
12.}
<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:90px;
height:120px;
overflow:hidden;
}
#album img{
position:absolute;
top:0;
left:0;
}
</style>
下面详细讲解一下淡入谈出相册的运作。尽管相册有许多相片，每次运行都是执行两张相片的透明度设置。并且当上面一张（我们看到的那张）正准备淡出时，下面那张已淡入得差不多。换言之，我们要想办法错开两张图片的出场时间。由于淡入淡出（fade）其实是透明特效加display的切换，如何取得opacity样式值呢？要知道，设置样式与获取样式，完全不是一回事。获取样式远比设置样式复杂，如果不是内联样式，在IE中就要调用currentStyle加遍历父级元素。一个取巧的办法，就是不要在获取opacity中下工夫，直接设置一个自定义属性opacity（非style.opacity），每次执行透明度设置时用这个opacity赋值，并每次一点点改变这个opacity的值。正在淡出的图片对象的opacity呈递减状态，反之亦然。
01.var album = function(el){ 
02.  var node = (typeof el == "string")? document.getElementById(el):el; 
03.  var images = node.getElementsByTagName("img"); 
04.  var length = images.length; 
05.  for(var i=1;i<length;i++) images[i].opacity = 0;//为所有图片设置一个自定义属性opacity 
06.  images[0].opacity = 0.99; 
07.  var current = 0; 
08.  (function(){ 
09.    setTimeout(function(){ 
10.      var cOpacity = images[current].opacity, 
11.      next = images[current+1]?current+1:0;//下一张图片的索引，如果没有就回到第一张 
12.      var nOpacity = images[next].opacity; 
13.      cOpacity-=.05; 
14.      nOpacity+=.05; 
15.      images[current].opacity = cOpacity; 
16.      images[next].opacity = nOpacity; 
17.      images[next].style.display = "block";//确保肯定有一张图片是可见的 
18.      setOpacity(images[current]); 
19.      setOpacity(images[next]); 
20.      if(cOpacity<=0) { 
21.        images[current].style.display = "none"; 
22.        current = next; 
23.        setTimeout(arguments.callee,1000); 
24.      }else{ 
25.        setTimeout(arguments.callee,50); 
26.      } 
27.    },100) 
28.  })() 
29.} 
30.var setOpacity =function(obj) { 
31.  if(obj.opacity>.99) { 
32.    obj.opacity = .99; 
33.  } 
34.  obj.style.opacity = obj.opacity; 
35.  obj.style.filter = "alpha(opacity=" + (obj.opacity*100) + ")"; 
36.}
<!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;
}
</style>
<script type="text/<a href="http://webdevelop.jzxue.com/javascript-ajax/" target="_blank">javascript</a>">
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>
ablum函数中的闭包相当于：
01.var repeat = function(){ 
02.  setTimeout(function(){ 
03.    //*************略************* 
04.    if(cOpacity<=0) { 
05.      images[current].style.display = "none"; 
06.      current = next; 
07.      setTimeout(repeat,1000); 
08.    }else{ 
09.      setTimeout(repeat,50); 
10.    } 
11.  },100) 
12.  repeat();
闭包让我们少写许多东西，程序变得更紧凑。我们甚至可以搞个点击停顿效果，不过说实话，只是个假象而已，只能让它多停留两秒。你多点击几下，这张图片就静止久一点。我可不想点击一下整个相册就不动了。
01.var album = function(el){ 
02.  var node = (typeof el == "string")? document.getElementById(el):el; 
03.  var images = node.getElementsByTagName("img"); 
04.  var length = images.length; 
05.  var current = 0; 
06.  for(var i=1;i<length;i++){ 
07.    images[i].opacity = 0;//为所有图片设置一个自定义属性opacity 
08.    images[i].onclick = (function(i){//点击停顿效果 
09.      return function(){ 
10.        current = i + 1; 
11.        if(current > 3) 
12.          current = 3 
13.      } 
14.    })(i); 
15.  } 
16.  images[0].opacity = 0.99; 
17.  (function(){ 
18.    setTimeout(function(){ 
19.      var cOpacity = images[current].opacity, 
20.      next = images[current+1]?current+1:0;//下一张图片的索引，如果没有就回到第一张 
21.      var nOpacity = images[next].opacity; 
22.      cOpacity-=.05; 
23.      nOpacity+=.05; 
24.      images[current].opacity = cOpacity; 
25.      images[next].opacity = nOpacity; 
26.      images[next].style.display = "block";//确保肯定有一张图片是可见的 
27.      setOpacity(images[current]); 
28.      setOpacity(images[next]); 
29.      if(cOpacity<=0) { 
30.        images[current].style.display = "none"; 
31.        current = next; 
32.        setTimeout(arguments.callee,1000); 
33.      }else{ 
34.        setTimeout(arguments.callee,50); 
35.      } 
36.    },100) 
37.  })() 
38.} 
39.var setOpacity =function(obj) { 
40.  if(obj.opacity>.99) { 
41.    obj.opacity = .99; 
42.  } 
43.  obj.style.opacity = obj.opacity; 
44.  obj.style.filter = "alpha(opacity=" + (obj.opacity*100) + ")"; 
45.}
<!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 id="img1" 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);
}
#img1 {
opacity:.99;
filter:alpha(opacity=99);
}
</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;
var current = 0;
for(var i=1;i<length;i++){
images[i].opacity = 0;//为所有图片设置一个自定义属性opacity
images[i].onclick = (function(i){
return function(){
current = i + 1;
if(current > 3)
current = 3
}
})(i);
}
images[0].opacity = 0.99;
(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>
</body>
</html>
好了本文就到止了，简单的结构层与表现层注定了行为层不会有多大作为。相册如果要做得很漂亮，通常需要动用到定义列表与伪类，随之而来的是几百行javascript代码，显然这与我的题目不符。另，基于时间轴来编写代码太考验人的思维能力，没有可视化界面吓跑一堆人，都跑去做Flash了。
上一篇:JavaScript 仿歌词特效代码
下一篇:css制作弹动的网页导航
TAG: JavaScript 淡入淡出相册代码
搜索

JavaScript 淡入淡出相册特效代码
