click - 在点击链接上将透明的.png淡化为彼此

试试这个简单的例子（在Opera 10和Firefox 2中测试过）。每个图像必须具有相同的尺寸。这意味着每个图层都放在同一个位置。

你应该改变的是：

width块内的所有height和<style>值（以像素为单位）以匹配您的完整地图。
layerdata数组，其中包含每个图层的日期选择文本（date）的对象和图像的网址（url）。
< / LI>
animdelay。淡入/淡出每个不透明度级别的毫秒（¹ / ₁₀₀₀秒）单位延迟。默认值为100毫秒。共有10个不透明度级别。减少延迟以加速动画。

sample.html：

<html>
  <head>
    <style>
      #dates label { display:block; }
      #frame { border:1px solid black; width:500px; height:500px; }
      .layer {
        "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter:alpha(opacity=0);
        opacity:0; position:absolute; width:500px; height:500px;
      }
    </style>
  </head>
  <body>
    Date:
    <div id="dates">
    </div>
    <div id="frame">
    </div>
    <script>
      //get element opacity for Internet Explorer
      function getOpacityIE(ele) { //returns level: 0-100
        return ele.filters[0].opacity;
      }
      //set element opacity for Internet Explorer
      function setOpacityIE(ele,level) { //level: 0-100
        ele.filters[0].opacity=level;
      }
      //get element opacity for web-standard browsers
      function getOpacityStd(ele) { //returns level: 0-100
        return (ele.style.opacity!=''?ele.style.opacity*100:0);
      }
      //set element opacity for web-standard browsers
      function setOpacityStd(ele,level) { //level: 0-100
        ele.style.opacity=(level/100).toFixed(1);
      }
      //fade in/out each layers based on target date index
      function animate() {
        var done=true;
        for (var i=0; i<layers.length; i++) {
          var adjust=i<=dateidx?10:-10;
          var level=getOpacity(layers[i]);
          if (((adjust>0)&&(level<100)) || ((adjust<0)&&(level>0))) {
           setOpacity(layers[i],level+adjust);
           done=false;
          }
        }
        if (!done) animtimer=window.setTimeout(animate,animdelay);
      }
      //set/update layer index to show/hide and animate it
      function setdate(ele) {
        window.clearTimeout(animtimer);
        dateidx=ele.attributes['index'].value*1;
        animate();
      }
      //add date selection, below any existing one
      function addselection(idx,date) {
        var a=document.createElement('LABEL');
        a.htmlFor='date'+idx;
        a.innerHTML='<input id="date'+idx+'" index="'+idx+'" name="date" type="radio" onclick="setdate(this)" /> '+date;
        dates.appendChild(a);
      }
      //add layer (image) into frame, on top of any existing one
      function addlayer(idx,url) {
        var a=document.createElement('IMG');
        a.className='layer';
        a.src=url;
        layers.push(a);
        frame.appendChild(a);
      }
      //layerdata: from bottom to top
      var layerdata=[
        {date:'2000-01-01', url:'image1.png'},
        {date:'2000-01-08', url:'image2.png'},
        {date:'2000-01-15', url:'image3.png'},
        {date:'2000-01-22', url:'image4.png'}
      ];
      //animation delay in 1/1000 second unit per opacity level
      var animdelay=100;
      //runtime variables
      var dateidx=-1;
      var layers=[];
      var animtimer=0;
      if (typeof(frame.style.opacity)!='undefined') {
        var getOpacity=getOpacityStd;
        var setOpacity=setOpacityStd;
      } else {
        var getOpacity=getOpacityIE;
        var setOpacity=setOpacityIE;
      }
      //generate date selections and layers
      for (var i=0; i<layerdata.length; i++) {
        addselection(i,layerdata[i].date);
        addlayer(i,layerdata[i].url);
      }
    </script>
  </body>
</html>

在点击链接上将透明的.png淡化为彼此

1 个答案: