Ruby's Louvre

每天学习一点点算法

导航

一个很简单的淡入淡出相册

不知题目是否妥当,总之就是在相册中使用fade效果,让图片切换变得非常自然舒服。

<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>

添加样式,目标是让所有图片像叠罗汉一样摞在一起。

  #album{
    position:relative;
    border:10px solid #000;
    width:90px;
    height:120px;
    overflow:hidden;
  }
  #album img{
    position:absolute;
    top:0;
    left:0;
  }

下面详细讲解一下淡入谈出相册的运作。尽管相册有许多相片,每次运行都是执行两张相片的透明度设置。并且当上面一张(我们看到的那张)正准备淡出时,下面那张已淡入得差不多。换言之,我们要想办法错开两张图片的出场时间。由于淡入淡出(fade)其实是透明特效加display的切换,如何取得opacity样式值呢?要知道,设置样式与获取样式,完全不是一回事。获取样式远比设置样式复杂,如果不是内联样式,在IE中就要调用currentStyle加遍历父级元素。一个取巧的办法,就是不要在获取opacity中下工夫,直接设置一个自定义属性opacity(非style.opacity),每次执行透明度设置时用这个opacity赋值,并每次一点点改变这个opacity的值。正在淡出的图片对象的opacity呈递减状态,反之亦然。

  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;
    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) + ")";
  }

ablum函数中的闭包相当于:

  var repeat = function(){
    setTimeout(function(){
      //*************略*************
      if(cOpacity<=0) {
        images[current].style.display = "none";
        current = next;
        setTimeout(repeat,1000);
      }else{
        setTimeout(repeat,50);
      }
    },100)
    repeat();

闭包让我们少写许多东西,程序变得更紧凑。我们甚至可以搞个点击停顿效果,不过说实话,只是个假象而已,只能让它多停留两秒。你多点击几下,这张图片就静止久一点。我可不想点击一下整个相册就不动了。

  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) + ")";
  }

好了本文就到止了,简单的结构层与表现层注定了行为层不会有多大作为。相册如果要做得很漂亮,通常需要动用到定义列表与伪类,随之而来的是几百行javascript代码,显然这与我的题目不符。另,基于时间轴来编写代码太考验人的思维能力,没有可视化界面吓跑一堆人,都跑去做Flash了。

posted on 2009-09-14 21:58  司徒正美  阅读(6541)  评论(32编辑  收藏  举报