{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 叛逆 的问题《Fade transparent .png's on top of each other o》','https://www.manongdao.com/q-1115752.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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.
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?
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.
What you should change are:
All
widthandheightvalues (in pixels) within<style>block to match your complete map.The
layerdataarray, which contains an object for each layer's date selection text (date) and the URL of the image (url).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>