点击链接，将透明的.png顶部彼此重叠 [英] Fade transparent .png's on top of each other on clicking link
问题描述
我创建了一个650 X 610像素的历史铁路地图，并想要开始一个空白地图，然后褪色透明的.png图层只包含铁路的片段，一个在另一个之上，建立一个整个网络的形象。
I am creating a 650 X 610 px historical railway map and would like to start with a blank map, then fade in transparent .png layers containing just a fragment of the railway, one on top of the other, building up to an image of the whole network.
将会有一个网络扩展到点击的日期列表，并显示该位。使用实心图像轻松完成，但非常缓慢，有31个图像。
There would be a list of the dates the network was extended to click and make that bit of line appear. Easily done using solid images, but very slow and there are 31 images.
我在任何地方都找不到任何有关此论坛的问题。请任何人帮助？
I couldn't find any forum queries about this anywhere. Please could anyone help?
推荐答案
尝试这个简单的示例（在Opera 10和Firefox 2中测试）。每个图像必须具有相同的尺寸。
Try this simple example (tested in Opera 10 and Firefox 2). Each image must be of the same dimension. Meaning that each layer is placed at the same location.
您应该更改的是：
-
所有
width和height
layerdata 数组，其中包含每个图层的日期选择文本（ date ）和图像的URL（ url ）的对象
The layerdata array, which contains an object for each layer's date selection text (date) and the URL of the image (url).
animdelay 。以毫秒为单位的延迟（ 1 / 1000 秒）单位每个不透明度级别淡入/默认值为100ms。总共有10个不透明度级别。减少延迟以加快动画效果。
animdelay. Delay in millisecond (1/1000 second) unit per opacity level for fade in/out. The default is 100ms. There's a total of 10 opacity levels. Decrease the delay to speed up the animation.
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顶部彼此重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
