0

我正在创建一个 650 X 610 像素的历史铁路地图，并想从一张空白地图开始，然后淡入仅包含铁路片段的透明 .png 图层，一个在另一个之上，建立一个图像整个网络。

将有一个网络扩展日期列表，以单击并显示该行。使用实体图像很容易完成，但速度很慢，有 31 个图像。

我在任何地方都找不到关于此的任何论坛查询。请问有人可以帮忙吗？

4

1 回答 1

0

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

你应该改变的是：

  • width块内的所有height值（以像素为单位）<style>以匹配您的完整地图。

  • 该layerdata数组包含每个图层的日期选择文本 ( date) 和图像的 URL ( url) 的对象。

  • animdelay. 每个不透明度级别的淡入/淡出延迟以毫秒（1 / 1000秒）为单位。默认值为 100 毫秒。总共有 10 个不透明度级别。减少延迟以加快动画速度。

sample.html：

<html>
  <头部>
    <风格>
      #日期标签{显示：块；}
      #frame { 边框：1px 纯黑色；宽度：500 像素；高度：500 像素；}
      。层 {
        “程序：DXImageTransform.Microsoft.Alpha（不透明度=0）”；
        过滤器：阿尔法（不透明度= 0）；
        不透明度：0；位置：绝对；宽度：500 像素；高度：500 像素；
      }
    </style>
  </head>
  <正文>
    日期：
    <div id="日期">
    </div>
    <div id="帧">
    </div>
    <脚本>
      //获取 Internet Explorer 的元素不透明度
      function getOpacityIE(ele) { //返回级别：0-100
        返回 ele.filters[0].opacity;
      }
      //为 Internet Explorer 设置元素不透明度
      function setOpacityIE(ele,level) { //level: 0-100
        ele.filters[0].opacity=level;
      }
      //获取网页标准浏览器的元素不透明度
      function getOpacityStd(ele) { //返回级别：0-100
        返回 (ele.style.opacity!=''?ele.style.opacity*100:0);
      }
      //为网络标准浏览器设置元素不透明度
      function setOpacityStd(ele,level) { //level: 0-100
        ele.style.opacity=(level/100).toFixed(1);
      }
      //根据目标日期索引淡入/淡出每一层
      函数动画（）{
        变量完成=真；
        for (var i=0; i<layers.length; i++) {
          变量调整=i<=dateidx?10:-10;
          var level=getOpacity(layers[i]);
          如果（（（调整>0）&&（级别<100））||（（调整<0）&&（级别>0）））{
           设置不透明度（层[i]，级别+调整）；
           完成=假；
          }
        }
        if (!done) animtimer=window.setTimeout(animate,animdelay);
      }
      //设置/更新图层索引以显示/隐藏和动画它
      功能设置日期（ele）{
        window.clearTimeout(animtimer);
        dateidx=ele.attributes['index'].value*1;
        动画（）；
      }
      //添加日期选择，在任何现有的下方
      函数添加选择（idx，日期）{
        var a=document.createElement('LABEL');
        a.htmlFor='日期'+idx;
        a.innerHTML='<input id="date'+idx+'" index="'+idx+'" name="date" type="radio" onclick="setdate(this)" /> '+date;
        日期.appendChild(a);
      }
      //将图层（图像）添加到框架中，在任何现有的顶部
      函数 addlayer(idx,url) {
        var a=document.createElement('IMG');
        a.className='层';
        a.src=url;
        层.push(a);
        frame.appendChild(a);
      }
      //layerdata：从下到上
      变层数据= [
        {日期：'2000-01-01'，网址：'image1.png'}，
        {日期：'2000-01-08'，网址：'image2.png'}，
        {日期：'2000-01-15'，网址：'image3.png'}，
        {日期：'2000-01-22'，网址：'image4.png'}
      ];
      //每个不透明度级别以 1/1000 秒为单位的动画延迟
      变量动画延迟=100；
      //运行时变量
      var dateidx=-1;
      变层=[];
      变量动画定时器=0；
      if (typeof(frame.style.opacity)!='undefined') {
        var getOpacity=getOpacityStd;
        var setOpacity=setOpacityStd;
      } 别的 {
        var getOpacity=getOpacityIE;
        var setOpacity=setOpacityIE;
      }
      //生成日期选择和图层
      for (var i=0; i<layerdata.length; i++) {
        添加选择（i，layerdata[i].date）；
        addlayer(i,layerdata[i].url);
      }
    </脚本>
  </正文>
</html>
于 2012-07-20T05:22:43.507 回答