淡化透明.png的點擊鏈接上的對方頂部

我正在創建一個650 X 610像素的歷史鐵路地圖，並希望從一張空白地圖開始，然後淡入僅包含鐵路片段的透明.png圖層，一個在另一個之上，構建整個網絡的形象。淡化透明.png的點擊鏈接上的對方頂部

會有一個網絡延長點擊的日期列表，並使該行出現。使用可靠的圖像很容易完成，但非常緩慢，有31個圖像。

我找不到任何有關此任何論壇的問題。請任何人都可以幫忙？

來源

2012-07-20 liz

試試這個簡單的例子（在Opera 10和Firefox 2中測試過）。每個圖像必須具有相同的尺寸。這意味着每個圖層都放置在相同的位置。

你應該改變什麼：

所有width和height值（像素）<style>塊內，以符合您完整的地圖。
layerdata數組，其中包含每個圖層的日期選擇文本（date）和圖像的URL（url）的對象。
animdelay。以毫秒爲單位的延遲（/秒）用於淡入/淡出的每個不透明度級別的單位。默認值是100ms。總共有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>

來源

2012-07-20 05:22:43 Jay

三江源周杰倫將所有的麻煩，但我複製並粘貼代碼，添加圖像地址，以及所有我得到的是一個黑邊的平方與日期：它上面。保留已寫入的圖層數據，將圖像文件移動到與html文件相同的目錄中，並將文件名image1.png更改爲1854.png等等。生活並不簡單。 – liz 2012-07-20 09:13:38

它適用於Opera v10，但不適用於Firefox v2。所以我修好了。對不起。 – Jay 2012-07-20 10:03:31

再次感謝，傑伊。在Opera和Chrome中工作得很好 - 正是我想要的（如果其他人正在閱讀，這是一個非常有用的腳本） - 但在Firefox 13.01中沒有日期或圖像，只顯示日期和IE9中的最後一張圖像。由於這超出了我非常有限的能力，你能繼續嗎？謝謝你的確。 – liz 2012-07-20 23:06:45

淡化透明.png的點擊鏈接上的對方頂部

回答

相關問題