링크를 클릭하면 투명한 투명 .png가 서로 겹쳐집니다.

전 650m 610px의 역사적인 철도지도를 만들고 빈지도로 시작한 다음 철도 조각을 포함하는 투명한 .png 레이어를 페이드 인합니다 , 하나는 다른 하나의 위에, 전체 네트워크의 이미지를 구축.링크를 클릭하면 투명한 투명 .png가 서로 겹쳐집니다.

네트워크가 클릭되어 해당 비트가 표시되도록 확장 된 날짜 목록이 있습니다. 솔리드 이미지를 사용하면 쉽게 할 수 있지만 매우 느리고 31 개의 이미지가 있습니다.

어디서나 포럼 관련 검색어를 찾을 수 없습니다. 누구든지 도와 줄 수 있습니까?

출처

2012-07-20 liz

간단한 예제 (Opera 10 및 Firefox 2에서 테스트)를 사용해보십시오. 각 이미지는 동일한 차원이어야합니다. 각 레이어가 동일한 위치에 배치된다는 의미입니다. 변경해야합니까

은 다음과 같습니다 완전한지도를 일치 <style> 블록 내 (픽셀)

모든 width 및 height 값.
각 레이어의 날짜 선택 텍스트 (date)와 이미지 URL (url)에 대한 개체가 포함 된 layerdata 배열입니다.
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

Opera v10에서는 작동하지만 Firefox v2에서는 작동하지 않습니다. 그래서 나는 그것을 고쳤다. 그 죄송합니다. – Jay

다시 한 번 감사드립니다. Jay. 오페라와 크롬에서 아름답게 일했습니다. - 다른 사람들이 이것을 읽는다면, 매우 유용한 스크립트입니다. - 파이어 폭스 13.01에는 날짜 나 이미지가없고, 날짜와 마지막 이미지 만 IE9에 나타납니다. 이것이 나의 매우 제한된 능력을 넘어서는 길이므로, 계속 누를 수 있습니까? 참으로 감사합니다. – liz

링크를 클릭하면 투명한 투명 .png가 서로 겹쳐집니다.

답변

관련 문제