【jQuery】マウスオーバーで画像をふわっとフェードで切り替えるsmart-crossfade.js実装方法

画像をマウスオーバーしたときにただぱっと切り替わるだけでも良いですが、ふわっとフェードで切り替わるようにsmart-crossfade.jsを実装してみました。
とっても簡単にできたので、使い方をメモします♪

>［2014.08.15］CSS3でふわっと切り替える方法の記事も書きました

手順↓↓

head内にjQueryをインポート

今回は、Google Hosted Librariesから引用します！

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script></script>
<script type="text/javascript" src="【jsを入れるディレクトリ】/smart-crossfade.js"></script>

同じhead内にsmart-crossfade.jsを読み込ませるタグも書きます。

画像を2枚用意します

同じサイズの、異なる2枚の画像を用意します。
今回はこの画像を使ってみます^O^

それぞれファイル名の末尾に”_on”,”_off”とつけます。

ex：cava_off.jpg、cava_on.jpg
※_offが通常表示される画像、_onのほうがマウスオーバーした時に切り替わる画像になります。

smart-crossfade.jsのソース

smart-crossfade.jsに下記を記載します。

function smartRollover() {
    if(document.getElementsByTagName) {
        var images = document.getElementsByTagName("img");

        for(var i=0; i < images.length; i++) {
            if(images[i].getAttribute("src").match("_off."))
            {
                images[i].onmouseover = function() {
                    this.setAttribute("src", this.getAttribute("src").replace("_off.", "_on."));
                }
                images[i].onmouseout = function() {
                    this.setAttribute("src", this.getAttribute("src").replace("_on.", "_off."));
                }
            }
        }
    }
}

if(window.addEventListener) {
    window.addEventListener("load", smartRollover, false);
}
else if(window.attachEvent) {
    window.attachEvent("onload", smartRollover);
}

// cross fade

new function(){
  function setRollOver2(){
    if(!document.images){return;}
    var imgs = document.images;
    var insert = [];
    for(var i=0;i<imgs.length;i++){
      var splitname = imgs[i].src.split('_off.');
      if((splitname[1])&&(imgs[i].parentNode.tagName=='A')){
        var rolloverImg = document.createElement('img');
        rolloverImg.src = splitname[0]+'_on.'+splitname[1];
        var alpha = 0;
        rolloverImg.currentAlpha = alpha;
        rolloverImg.style.opacity = alpha/100;
        rolloverImg.style.filter = 'alpha(opacity='+alpha+')';
        rolloverImg.style.position = 'absolute';

        addEvent(rolloverImg,'mouseover',function(){setFader(this,100);});
        addEvent(rolloverImg,'mouseout',function(){setFader(this,0);});

        insert[insert.length] = {position:imgs[i],element:rolloverImg};
      }
    }
    for(var i=0;i<insert.length;i++){
      var parent = insert[i].position.parentNode;
      parent.insertBefore(insert[i].element,insert[i].position);
    }
  }

  function setFader(targetObj,targetAlpha){
    targetObj.targetAlpha = targetAlpha;
    if(targetObj.currentAlpha==undefined){
      targetObj.currentAlpha = 100;
    }
    if(targetObj.currentAlpha==targetObj.targetAlpha){
      return;
    }
    if(!targetObj.fading){
      if(!targetObj.fader){
        targetObj.fader = fader;
      }
      targetObj.fading = true;
      targetObj.fader();
    }
  }

  function fader(){
    this.currentAlpha += (this.targetAlpha - this.currentAlpha)*0.2;
    if(Math.abs(this.currentAlpha-this.targetAlpha)<1){
      this.currentAlpha = this.targetAlpha;
      this.fading = false;
    }
    var alpha = parseInt(this.currentAlpha);
    this.style.opacity = alpha/100;
    this.style.filter = 'alpha(opacity='+alpha+')';
    if(this.fading){
      var scope = this;
      setTimeout(function(){fader.apply(scope)},30);
    }
  }

  function addEvent(eventTarget, eventName, func){
    if(eventTarget.addEventListener){
      eventTarget.addEventListener(eventName, func, false);
    }else if(window.attachEvent){
      // IE
      eventTarget.attachEvent('on'+eventName, function(){func.apply(eventTarget);});
    }
  }

  addEvent(window,'load',setRollOver2);

}

画像を表示したい箇所には“_off”を＜a＞タグで囲います。

<a href="#"><img alt="altを入れましょう" src="【画像のディレクトリ】/画像の名前_off.jpg" width="piyo" height="piyo" /></a>

87行目の【30】の部分を変えるとフェードの時間が変わります。

setTimeout(function(){fader.apply(scope)},30);

数字を増やすとゆっくりになります。

これだけ！とっても簡単でした^O^

 

ちなみに、写真はカバのサングリアでした☆
見た目も可愛くってとっても美味しい〜^O^