【问题标题】：Fade transparent .png's on top of each other on clicking link单击链接时将透明的 .png 淡入淡出
【发布时间】：2012-07-19 07:17:41
【问题描述】：
我正在创建一张 650 X 610 像素的历史铁路地图，并希望从一张空白地图开始，然后淡入仅包含铁路片段的透明 .png 图层，一个在另一个之上，建立一个整个网络的形象。
会有一个网络扩展日期列表，以单击并显示该行。使用实体图像很容易完成，但速度很慢，有 31 个图像。
我在任何地方都找不到任何关于此的论坛查询。请问有人可以帮忙吗？
【问题讨论】：
标签：
click
png
transparent
fade
【解决方案1】：
试试这个简单的例子（在 Opera 10 和 Firefox 2 中测试）。每个图像必须具有相同的尺寸。这意味着每一层都放置在相同的位置。
你应该改变的是：
<style> 块内的所有 width 和 height 值（以像素为单位）以匹配您的完整地图。
layerdata 数组，其中包含每个图层的日期选择文本 (date) 和图像 URL (url) 的对象。
animdelay。每个不透明度级别的淡入/淡出延迟以毫秒（1/1000 秒）为单位。默认值为 100 毫秒。总共有 10 个不透明度级别。减少延迟以加快动画速度。
sample.html:
#日期标签{显示：块； }
#frame { 边框：1px 纯黑色；宽度：500 像素；高度：500 像素； }
。层 {
“程序：DXImageTransform.Microsoft.Alpha（不透明度=0）”；
过滤器：阿尔法（不透明度= 0）；
不透明度：0；位置：绝对；宽度：500 像素；高度：500 像素；
}
日期：
//获取 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
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=' '+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正文>