popup.js
10.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
// ---------------------------------------------------
scriptName = "popupmess205b.js";
author = "Hiyoko";
version = "Ver2.05b 2002/12/23";//Opera7.0に対応
home = "http://members.jcom.home.ne.jp/1633348312/";
// ---------------------------------------------------
var sep_x = 0;
var sep_y = 20;
var mess_w = new Array();
var mess_h = new Array();
// --------------------------------------------------- 影モードの設定 ----------------------
// alphaModeはIEでの影モードです。trueで有効、7,7は横ずれ位置、縦ずれ位置、40は透明度（小さいほど薄い0〜100）
// 影モードを無効にするには「true」の部分を「false」として下さい。
var alphaMode = new Array(true,7,7,40); //IE-only
var syadowStyleMode = true; //影のスタイルを別指定する=true,しない=false
var syadowStyleName = "syadowstyle"; //別指定する場合のclass名
//
// syadowStyleMode = true とした場合は、影のスタイル指定を必ず
// syadowStyleName で指定したclassをスタイル定義してください。
// (もちろんalphaModeがtrueの場合のみ）
// --------------------------------------------------- 透明度変化設定 ----------------------
var alphaMotion = true; // Alpha変化モードのサポートする=true,しない=false
var alphaStep = 10; // 透明度変化ステップ
var alphaIntv = 50; // 透明度変化スピード
// ---------------------------------------------------以下修正必要なし----------------------
var alphaFlag = true; // do'nt edit
var alphaTimerID = 0; // do'nt edit
var opacityLevel = new Array();
opacityLevel[0] = (alphaMotion)?0:100;
opacityLevel[1] = (alphaMotion)?0:alphaMode[3];
opacityLevel[2] = 0;
opacityLevel[3] = 0;
var id1,id2;
// ---------------------------------------------------
var messTimerID=0;
var disp_flg = 0;
var flg= 0;
var NN6flg = 0; // NN6対策用
var ms = 0;
var ms2= 0;
var x = 0;
var y = 0;
var winSize = new Array();
var mac = (navigator.userAgent.indexOf('Mac')>=0);
var opera = (navigator.userAgent.indexOf('Opera')>=0);
var op6 = (navigator.userAgent.indexOf('Opera 6')>=0)||(navigator.userAgent.indexOf('Opera/6')>=0);
var op7 = (navigator.userAgent.indexOf('Opera 7')>=0)||(navigator.userAgent.indexOf('Opera/7')>=0);
var ie5 = (navigator.appVersion.indexOf('MSIE 5')>=0)||(navigator.appVersion.indexOf('MSIE 6')>=0)||(navigator.appVersion.indexOf('MSIE 7')>=0||(navigator.appVersion.indexOf('MSIE 8')>=0));
var ie4 = (navigator.appVersion.indexOf('MSIE 4')>=0);
alphaMode[0] = (mac||opera)?false:alphaMode[0]; // Mac&Operaはfilterをサポートしていないので動作しません。
alphaMotion = (mac||opera)?false:alphaMotion
// Windowサイズを取得
function getWinsize(){
winSize[0] = ((!document.all && document.getElementById)||(document.layers)) ? window.innerWidth : document.body.clientWidth;
winSize[1] = ((!document.all && document.getElementById)||(document.layers)) ? window.innerHeight : document.body.clientHeight;
}
// メッセージレイヤーサイズの取得
function getLaysize(num){
var wh = new Array();
if (document.all && !op7){
var thisspan = document.all("span"+num);
wh[0] = ((ie4)||(ie5))?thisspan.offsetWidth :thisspan.style.pixelWidth;
wh[1] = ((ie4)||(ie5))?thisspan.offsetHeight:thisspan.style.pixelHeight;
}
if (document.layers){
var thisspan = eval("document.span"+num);
wh[0] = thisspan.clip.width;
wh[1] = thisspan.clip.height;
}
if ((!document.all && document.getElementById) || op7){
var thisspan = document.getElementById("span"+num);
wh[0] = thisspan.offsetWidth;
wh[1] = thisspan.offsetHeight;
}
return wh;
}
// マウス座標位置取得
function handlerMM(e){
x = (document.all&&!opera) ? document.body.scrollLeft+event.clientX : (op6)?event.clientX : e.pageX;
y = (document.all&&!opera) ? document.body.scrollTop+event.clientY : (op6)?event.clientY : e.pageY;
flg=1;
if(disp_flg ==1){ disp_mess(ms2);}else{del_mess(ms2);}
}
// フローティングメッセージの表示
function disp_mess(ms){
disp_flg = 1;
if (flg==1 && document.all && !op6){
if(ie4){
messize = getLaysize(ms);
mess_w[ms] = messize[0];
mess_h[ms] = messize[1];
}
x =(winSize[0]<x+sep_x+mess_w[ms]+10-document.body.scrollLeft)?winSize[0]-mess_w[ms]-10+document.body.scrollLeft:x+sep_x;
y =(winSize[1]<y+sep_y+mess_h[ms]-document.body.scrollTop)?y-mess_h[ms]-20:y+sep_y;
var thisspan = document.all("span"+ms).style;
thisspan.posLeft=x;
thisspan.posTop =y;
thisspan.pixelWidth = mess_w[ms];
thisspan.pixelHeight = mess_h[ms];
thisspan.visibility="visible";
if(alphaMode[0]&&ie5){
thisspan = document.all("syadow"+ms).style;
thisspan.posLeft=x+alphaMode[1];
thisspan.posTop =y+alphaMode[2];
thisspan.pixelWidth = mess_w[ms];
thisspan.pixelHeight = mess_h[ms];
thisspan.zIndex = 90;
thisspan.visibility="visible";
}
if(alphaFlag&&alphaMotion&&ie5){opacityChange(ms);}
}
if (flg==1 && document.layers){
x =(winSize[0]<x+sep_x+mess_w[ms]+20-pageXOffset)?winSize[0]-mess_w[ms]-20+pageXOffset:x+sep_x;
y =(winSize[1]<y+sep_y+mess_h[ms]-pageYOffset+15)?y-mess_h[ms]-15:y+sep_y;
var thisspan = eval("document.span"+ms);
thisspan.left=x;
thisspan.top=y;
thisspan.clip.width = mess_w[ms];
thisspan.clip.height = mess_h[ms];
thisspan.visibility="visible"
}
if (flg==1 && !document.all && document.getElementById && !op6){
if(NN6flg==0){ //NN6対策
for(i=0;i<message.length;i++){
messize = getLaysize(i);
mess_w[i] = messize[0];
mess_h[i] = messize[1];
}
NN6flg=1;
}
x =(winSize[0]<x+sep_x+mess_w[ms]+30-scrollX)?winSize[0]-mess_w[ms]-30+scrollX:x+sep_x;
y =(winSize[1]<y+sep_y+mess_h[ms]-scrollY+15)?y-mess_h[ms]-20:y+sep_y;
var thisspan = document.getElementById("span"+ms);
thisspan.style.left=x;
thisspan.style.top =y;
thisspan.style.width = mess_w[ms];
thisspan.style.height = mess_h[ms];
thisspan.style.visibility="visible"
if(alphaMode[0]&&ie5){
thisspan = document.getElementById("syadow"+ms);
thisspan.style.left=x+alphaMode[1];
thisspan.style.top =y+alphaMode[2];
thisspan.style.width = mess_w[ms];
thisspan.style.height = mess_h[ms];
thisspan.style.zIndex = 90;
thisspan.style.visibility="visible";
}
if(alphaFlag&&alphaMotion&&ie5){opacityChange(ms);}
}
if (flg==1 && op6){
if(NN6flg==0){ //上に同じくまったりと？（笑）
for(i=0;i<message.length;i++){
messize = getLaysize(i);
mess_w[i] = messize[0];
mess_h[i] = messize[1];
}
NN6flg=1;
}
x =(winSize[0]<x+sep_x+mess_w[ms]-document.body.scrollLeft)?winSize[0]-mess_w[ms]+document.body.scrollLeft:x+sep_x;
y =(winSize[1]<y+sep_y+mess_h[ms]-document.body.scrollTop)?y-mess_h[ms]-10:y+sep_y;
var thisspan = document.getElementById("span"+ms);
thisspan.style.left=x;
thisspan.style.top =y;
thisspan.style.width = mess_w[ms];
thisspan.style.height = mess_h[ms];
thisspan.style.visibility="visible"
}
ms2=ms;
}
// フローティングメッセージの非表示
function del_mess(ms){
disp_flg = 0;
if(alphaMotion&&ie5){opacityClear(ms);}
if (document.all){
var thisspan = document.all("span"+ms).style;
thisspan.visibility="hidden";
if(alphaMode[0]&&ie5){
thisspan = document.all("syadow"+ms).style;
thisspan.visibility="hidden";
}
}
if (document.layers){
var thisspan = eval("document.span"+ms);
thisspan.visibility="hidden";
}
if (!document.all && document.getElementById){
var thisspan = document.getElementById("span"+ms).style;
thisspan.visibility="hidden";
if(alphaMode[0]&&ie5){
thisspan = document.getElementById("syadow"+ms).style;
thisspan.visibility="hidden";
}
}
ms2=ms;
}
// ---------------------------------------------------
function opacityChange(ms){
id1 = (document.all)?document.all("span"+ms):document.getElementById("span"+ms);
id2 = (document.all)?document.all("syadow"+ms):document.getElementById("syadow"+ms);
opacityLevel[2] += alphaStep;
if(opacityLevel[2]>100){opacityLevel[2]=100;alphaFlag=false;}
opacityLevel[3] = Math.round(opacityLevel[2]*alphaMode[3]/100);
id1.filters.Alpha.opacity=opacityLevel[2];
id2.filters.Alpha.opacity=opacityLevel[3];
if(alphaFlag){alphaTimerID = setTimeout("opacityChange("+ms+")",alphaIntv);}
}
function opacityClear(ms){
id1 = (document.all)?document.all("span"+ms):document.getElementById("span"+ms);
id2 = (document.all)?document.all("syadow"+ms):document.getElementById("syadow"+ms);
opacityLevel[2] = 0;
opacityLevel[3] = 0;
id1.filters.Alpha.opacity=opacityLevel[2];
id2.filters.Alpha.opacity=opacityLevel[3];
clearTimeout(alphaTimerID);
alphaFlag=true;
}
function NN_reload(){
if (document.layers){location.reload();}else{getWinsize();}
}
// メッセージデーターの先読み
for (i=0;i<message.length;i++){
document.write("<div id='span"+i+"' class='spanstyle' style='position:absolute;filter:Alpha(opacity="+opacityLevel[0]+")'");
if(ie4){document.writeln(" style='width:10px;'><table><tr><td nowrap");}
document.write(">");
document.writeln(message[i]);
if(ie4){document.writeln("</td></tr></table>");}
document.writeln("</div>");
if(alphaMode[0]&&ie5){
syadowcss = (syadowStyleMode)?syadowStyleName:"spanstyle";
document.write("<div id='syadow"+i+"' class='"+syadowcss+"' style='position:absolute;filter:Alpha(opacity="+opacityLevel[1]+");'>");
document.writeln(message[i]);
document.writeln("</div>");
}
var messize = new Array();
if(document.all || document.layers){
messize = getLaysize(i);
mess_w[i] = messize[0];
mess_h[i] = messize[1];
}
}
// マウスイベント設定
if (document.layers){
document.captureEvents(Event.MOUSEMOVE);
}
if (!document.all && document.getElementById && !op6 && !op7){
window.onmousemove = handlerMM;
window.captureEvents(Event.MOUSEMOVE);
}else{
document.onmousemove = handlerMM;
}
window.onresize = NN_reload;
getWinsize();