https://www.asahizushi.com/common/js/rollover.js

1/**
2 * クロスフェードするロールオーバー処理
3 * rollover2.js
4 * Copyright (c) 2007 KAZUMiX
5 * http://d.hatena.ne.jp/KAZUMiX/20071017/rollover2
6 * 
7 * Licensed under the MIT License:
8 * http://www.opensource.org/licenses/mit-license.php
9 * 
10 * 更新履歴
11 * 2009/06/02 ブラウザの「戻る」でフェード状態が残っている場合に対処
12 * 2007/10/17 公開
13 */
14
15(function(){
16   // ページ遷移時に透明にする用
17   var rolloverImages = [];
18   
19   function setRollOver2(){
20     if(!document.images){return;}
21     var imgs = document.images;
22     var insert = [];
23     for(var i=0,len=imgs.length; i<len; i++){
24       var splitname = imgs[i].src.split('_rollout.');
25       if(splitname[1]){
26         var rolloverImg = document.createElement('img');
27         rolloverImages.push(rolloverImg);
28         rolloverImg.src = splitname[0]+'_rollover.'+splitname[1];
29         var alpha = 0;
30         rolloverImg.currentAlpha = alpha;
31         rolloverImg.style.opacity = alpha/100;
32         rolloverImg.style.filter = 'alpha(opacity='+alpha+')';
33         rolloverImg.style.position = 'absolute';
34
35         //ロールオーバー・アウト処理それぞれを設定
36         addEvent(rolloverImg,'mouseover',function(){setFader(this,100);});
37         addEvent(rolloverImg,'mouseout',function(){setFader(this,0);});
38
39         // 後で追加するために追加場所と共に保存しておく
40         // この時点で追加するとdocument.imagesが書き換わって不都合
41         insert[insert.length] = {position:imgs[i],element:rolloverImg};
42       }
43     }
44     // ↑で作ったロールオーバー画像を追加
45     for(i=0,len=insert.length; i<len ;i++){
46       var parent = insert[i].position.parentNode;
47       parent.insertBefore(insert[i].element,insert[i].position);
48     }
49
50     // ページ遷移時にはフェード状態をクリアする
51     addEvent(window,'beforeunload', clearRollover);
52   }
53
54   // 指定要素を指定透明度にするためのフェードアニメを設定する関数
55
56   function setFader(targetObj,targetAlpha){
57     targetObj.targetAlpha = targetAlpha;
58     if(targetObj.currentAlpha==undefined){
59       targetObj.currentAlpha = 100;
60     }
61     if(targetObj.currentAlpha==targetObj.targetAlpha){
62       return;
63     }
64     if(!targetObj.fading){
65       if(!targetObj.fader){
66         targetObj.fader = fader;
67       }
68       targetObj.fading = true;
69       targetObj.fader();
70     }
71   }
72
73   // アルファ値をターゲット値に近づける関数
74   // ターゲット値になったら終了
75
76   function fader(){
77     this.currentAlpha += (this.targetAlpha - this.currentAlpha)*0.2;
78     if(Math.abs(this.currentAlpha-this.targetAlpha)<1){
79       this.currentAlpha = this.targetAlpha;
80       this.fading = false;
81     }
82     var alpha = parseInt(this.currentAlpha);

83     this.style.opacity = alpha/100;
84     this.style.filter = 'alpha(opacity='+alpha+')';
85     if(this.fading){
86       var scope = this;
87       setTimeout(function(){fader.apply(scope)},25);
88     }
89   }
90   
91   // すべてのロールオーバー画像をを透明にする関数（遷移時用）
92
93   function clearRollover(){
94     for(var i=0,len=rolloverImages.length; i<len; i++){
95       var image = rolloverImages[i];
96       image.style.opacity = 0;
97       image.style.filter = 'alpha(opacity=0)';
98     }
99   }
100
101   // イベントを追加する関数
102
103   function addEvent(eventTarget, eventName, func){
104     if(eventTarget.addEventListener){
105       // モダンブラウザ
106       eventTarget.addEventListener(eventName, func, false);
107     }else if(window.attachEvent){
108       // IE
109       eventTarget.attachEvent('on'+eventName, function(){func.apply(eventTarget);});
110     }
111   }
112
113   addEvent(window,'load',setRollOver2);
114
115 })();