画像にPNGマスクがかけられる「Fun with Transparent PNG Images」このサイトにあるjQueryで同一html内に2種類のフレームが使えずに困ってます。どなたか解る方いますでしょうか？

みんなの回答 1 件

名無しさんの回答

IE6は無視で元のコードを複数フレームに対応してみました。参考まで。

var png_classes = ['frame-one', 'frame-two']; 
var png_overlays = ['roll-one.png', 'roll-two.png']; 
 
function addEvent( obj, type, fn ) { 
 if (obj.addEventListener) { 
  obj.addEventListener( type, fn, false ); 
  EventCache.add(obj, type, fn); 
 } 
 else if (obj.attachEvent) { 
  obj["e"+type+fn] = fn; 
  obj[type+fn] = function() { obj["e"+type+fn]( window.event ); } 
  obj.attachEvent( "on"+type, obj[type+fn] ); 
  EventCache.add(obj, type, fn); 
 } 
 else { 
  obj["on"+type] = obj["e"+type+fn]; 
 } 
} 
var EventCache = function(){ 
 var listEvents = []; 
 return { 
  listEvents : listEvents, 
  add : function(node, sEventName, fHandler){ 
   listEvents.push(arguments); 
  }, 
  flush : function(){ 
   var i, item; 
   for(i = listEvents.length - 1; i >= 0; i = i - 1){ 
    item = listEvents[i]; 
    if(item[0].removeEventListener){ 
     item[0].removeEventListener(item[1], item[2], item[3]); 
    }; 
    if(item[1].substring(0, 2) != "on"){ 
     item[1] = "on" + item[1]; 
    }; 
    if(item[0].detachEvent){ 
     item[0].detachEvent(item[1], item[2]); 
    }; 
    item[0][item[1]] = null; 
   }; 
  } 
 }; 
}(); 
 
addEvent(window,'unload',EventCache.flush); 
 
function pngFrame() { 
 var imgs = document.images; 
 for( var i = 0, img; img = imgs[i]; i++ ) { 
        for(var j = 0, png_class; png_class = png_classes[j]; j++ ) { 
      if( img.className.indexOf(png_class) >= 0 ) { 
       var bgSrc = img.src; 
       img.style.background = "url(" + bgSrc + ")"; 
       img.src = png_overlays[j]; 
      } 
        } 
 } 
} 
 
addEvent(window,'load',pngFrame);

名無し

やりたかったことがこの記述でできました。すごく助かりました。本当にありがとうございます！！そして記述の仕方も勉強になりました！

最終更新日:2012-02-01 (3,072 views)

画像にPNGマスクがかけられる「Fun with Transparent PNG Images」このサイトにあるjQueryで同一html内に2種類のフレームが使えずに困ってます。どなたか解る方いますでしょうか？

みんなの回答 1 件

IE6は無視で元のコードを複数フレームに対応してみました。参考まで。

関連するトピックス