◆ フローティングを実行するボタンを用意します
<a href="javascript:void(0)" onClick="ShowPage(1)">フローティングを実行する</a>
/******************************************************************************
初期設定
******************************************************************************/
var gsFloatSwf_AN = 'http://c61.org/wd/Form/Floating.swf';
var gsFloatingBg_AN = "http://c61.org/wd/Form/FloatingBg.png";
var gsFloatId_AN = "Floating";
var gsFloatBgId_AN = "FloatingBg";
var gsTickerId_AN = "Ticker";
var giFloatLeft_AN = 0;
// フロートTickerを表示する
var gbShowFlg_AN = 0;
var giFloatNum_AN = 0;
// MacIEチェックを行う
bMacIeFlg_AN = CheckMacIe_AN();
/********************************************************************************
関数名 ShowPage
機能 Flashレイヤーを表示、非表示する
ポイント フローティングレイヤーの表示サイズは
SWFをクリックするたびに再計算する。
フローティングレイヤーの中身を新しいSWFソースで入れ替えることで
Flashを初期化する。
MacIEの場合のみ、表示、非表示のたびに
レンダリングしなおすために、スクロール処理を入れる。
入力 sMode 1:表示 0:非表示
出力 なし
処理概要
1. 現在表示されている場合
1.0. オブジェクト名を作成する
1.1. 表示モードの場合
1.1.2. ポジションを移動して終了する
1.2. 非表示モードの場合
1.2.2. 対象オブジェクトを削除する
2. 現在表示されていない場合
2.1. 表示モードの場合
2.1. フロートオブジェクトを作成する
2.2. フロートオブジェクトIDを作成する
2.3. フロートオブジェクトをbodyに追加する
2.2. 非表示モードの場合
2.2.1. 何もしない
3. MacIEの場合
3.1. 再レンダリングする
********************************************************************************/
function ShowPage(sMode){
var oLayer;
var sId;
var iLayerTop;
var iLayerWidth;
var iLayerHeight;
// 非表示モードの場合
if(sMode != 1) {
location.reload();
return;
// オブジェクトIDを作成する
sId = gsFloatId_AN;
oLayer = document.getElementById(sId);
// オブジェクトを削除する
oLayer.style.display='none';
oLayer.innerHTML='';
// オブジェクトIDを作成する
sId = gsFloatBgId_AN;
oLayer = document.getElementById(sId);
// オブジェクトを削除する
oLayer.style.display='none';
oLayer.innerHTML='';
// フラグを更新する
gbShowFlg_AN = 0;
// 自動調整をオフにする
clearInterval(iIntervalId);
clearInterval(iIntervalBgId);
return;
}
// 現在表示されている場合
if(gbShowFlg_AN == 1){
return;
// 現在表示されていない場合
} else {
// 表示モードの場合
if(sMode == 1){
// 背景ボックスを作成する ***************************************
// オブジェクトを作成する
oLayer = document.createElement('DIV');
oLayer.id = gsFloatBgId_AN;
oLayer.style.position = "absolute";
oLayer.style.zIndex = 999;
oLayer.style.display = "block";
// フローティングレイヤーのサイズを算出する
iLayerWidth = GetWindowSize_AN("width");
iLayerHeight = GetWindowSize_AN("height");
if(CheckBrowserModeForTicker_AN()){
oLayer.style.width = iLayerWidth + "px";
oLayer.style.height = iLayerHeight + "px";
oLayer.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + gsFloatingBg_AN + ", sizingmethod=scale)";
} else {
oLayer.style.width = "100%";
oLayer.style.height = "100%";
oLayer.style.backgroundImage = "url('" + gsFloatingBg_AN + "')";
}
// フローティングレイヤーにスタイルを指定する
oLayer.style.top = GetScrollPosition_AN("top") + "px";
oLayer.style.left = GetScrollPosition_AN("left") + "px";
// SWFタグを作成する
var sHtml = " ";
// SWFを挿入する
oLayer.innerHTML = sHtml;
// オブジェクトを追加する
document.getElementsByTagName('body')[0].appendChild(oLayer);
iIntervalBgId = setInterval("SetLayPosition_AN('" + gsFloatBgId_AN + "')", 100);
// Flash表示用レイヤー { ***************************************
// オブジェクトを作成する
oLayer = document.createElement('DIV');
oLayer.id = gsFloatId_AN;
oLayer.style.position = "absolute";
oLayer.style.zIndex = 1000;
oLayer.style.display = "block";
// フローティングレイヤーのサイズを算出する
iLayerWidth = GetWindowSize_AN("width");
iLayerHeight = GetWindowSize_AN("height");
if(CheckBrowserModeForTicker_AN()){
oLayer.style.width = iLayerWidth + "px";
oLayer.style.height = iLayerHeight + "px";
} else {
oLayer.style.width = "100%";
oLayer.style.height = "100%";
}
// フローティングレイヤーにスタイルを指定する
oLayer.style.top = GetScrollPosition_AN("top") + "px";
oLayer.style.left = GetScrollPosition_AN("left") + "px";
// SWFタグを作成する
var sHtml = "";
sHtml += '<table style="background-color:transparent; border:none; padding:0; margin:0; text-align:center; vertical-align:middle" border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">';
sHtml += '<tr><td align="center" valign="middle" style="padding:0; margin:0; border:none; background-color:transparent; text-align:center; vertical-align:middle">';
sHtml += '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="630" height="460" align="middle">';
sHtml += '<param name="bgcolor" value="#333333" />';
sHtml += '<param name="allowScriptAccess" value="always" />';
sHtml += '<param name="movie" value="' + gsFloatSwf_AN + '" />';
sHtml += '<param name="quality" value="high" />';
// sHtml += '<param name="wmode" value="transparent" />';
sHtml += '<param name="salign" value="lt" />';
sHtml += '<param name="SWLIVECONNECT" value="TRUE" />';
sHtml += '<embed bgcolor="#333333" SWLIVECONNECT="TRUE" salign="lt" align="middle" src="' + gsFloatSwf_AN + '" quality="high" width="630" height="460" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />';
// sHtml += '<embed SWLIVECONNECT="TRUE" salign="lt" align="middle" src="' + gsFloatSwf_AN + '" quality="high" wmode="transparent" width="630" height="460" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />';
sHtml += '</object></td></tr></table>';
// SWFを挿入する
oLayer.innerHTML = sHtml;
// オブジェクトを追加する
document.getElementsByTagName('body')[0].appendChild(oLayer);
iIntervalId = setInterval("SetLayPosition_AN('" + gsFloatId_AN + "')", 100);
// フラグを変更する
gbShowFlg_AN = 1;
}
}
// MacIEの場合
if(bMacIeFlg_AN == 1){
// 再レンダリングする
window.scrollBy(0, 1);
}
}
function SetLayPosition_AN(sId){
var oTarget = document.getElementById(sId);
if(CheckBrowserModeForTicker_AN()){
oTarget.style.width = GetWindowSize_AN("width") + "px";
oTarget.style.height = GetWindowSize_AN("height") + "px";
}
oTarget.style.top = GetScrollPosition_AN("top") + "px";
oTarget.style.left = GetScrollPosition_AN("left") + "px";
}
/********************************************************************************
関数名 GetMiddlePosition_AN
機能 現在のスクロール位置でのミドルポジションを取得する
入力 sMode top / left
出力 iPositionX X座標
iPositionY Y座標
処理概要 1. Windowサイズを取得する
2. スクロール位置を取得する
3. ミドルポジションを算出する
4. ミドルポジションを返して終了する
********************************************************************************/
function GetMiddlePosition_AN(sMode){
// Windowサイズを取得する
var iWindowWidth, iWindowHeight;
iWindowWidth = GetWindowSize_AN('width');
iWindowHeight = GetWindowSize_AN('height');
// スクロール位置を取得する
var iScrollTop, iScrollLeft;
iScrollTop = GetScrollPosition_AN('top');
iScrollLeft = GetScrollPosition_AN('left');
// ミドルポジションを算出する
var iMiddleTop = iWindowHeight / 2 + iScrollTop;
var iMiddleLeft = iWindowWidth / 2 + iScrollLeft;
// topを返す場合
if(sMode == "top"){
return iMiddleTop;
} else {
return iMiddleLeft;
}
}
/********************************************************************************
関数名 GetScrollPosition_AN
機能 スクロール位置を算出する
入力 sMode top / left
出力 iPosition
********************************************************************************/
function GetScrollPosition_AN(sMode){
var iScrollPosition;
if(sMode == "left"){
if(self.pageXOffset){
iScrollPosition = self.pageXOffset;
// Explorer 6 Strict
}else if(document.documentElement && document.documentElement.scrollLeft){
iScrollPosition = document.documentElement.scrollLeft;
// all other Explorers
}else if(document.body){
iScrollPosition = document.body.scrollLeft;
}
} else {
if(self.pageYOffset){
iScrollPosition = self.pageYOffset;
// Explorer 6 Strict
}else if(document.documentElement && document.documentElement.scrollTop){
iScrollPosition = document.documentElement.scrollTop;
// all other Explorers
}else if(document.body){
iScrollPosition = document.body.scrollTop;
}
}
return iScrollPosition;
}
/********************************************************************************
関数名 GetWindowSize_AN
機能 ウィンドウサイズを取得する
入力 sMoe "width" | "height"
*********************************************************************************/
function GetWindowSize_AN(sMode){
var iWindowWidth, iWindowHeight;
// all except Explorer
if(self.innerHeight){
iWindowWidth = self.innerWidth;
iWindowHeight = self.innerHeight;
// Explorer 6 Strict Mode
}else if(document.documentElement && document.documentElement.clientHeight){
iWindowWidth = document.documentElement.clientWidth;
iWindowHeight = document.documentElement.clientHeight;
// other Explorers
}else if(document.body){
iWindowWidth = document.body.clientWidth;
iWindowHeight = document.body.clientHeight;
}
if(sMode == "width"){
return (iWindowWidth);
} else {
return (iWindowHeight);
}
}
/********************************************************************************
関数名 CheckMacIe_AN
機能 MacIEであることをチェックする
********************************************************************************/
function CheckMacIe_AN(){
var sOs = GetOsName_AN();
var sNavigator = GetNavigatorName_AN();
if((sOs == "MacOSX" || sOs == "MacOS") && sNavigator == "Explorer"){
return true;
} else {
return false;
}
}
/********************************************************************************
関数名 CheckBrowserModeForTicker_AN
GetOsName_AN
GetNavigatorName_AN
機能 ブラウザチェック
*********************************************************************************/
function CheckBrowserModeForTicker_AN(){
var sOs = GetOsName_AN();
var sBrowser = GetNavigatorName_AN();
if(sOs == "Windows" && sBrowser == "Explorer"){
return true;
}
return false;
}
/********************************************************************************
関数名 GetOsName_AN
機能 OS情報を取得する
入力 なし
出力 sOsData Os情報 ("MacOSX","Windows")
********************************************************************************/
function GetOsName_AN()
{
var uAgent = navigator.userAgent.toUpperCase();
if (uAgent.indexOf("MAC OS X") >= 0) return "MacOSX";
if (uAgent.indexOf("MAC") >= 0) return "MacOS";
if (uAgent.indexOf("WIN") >= 0) return "Windows";
if (uAgent.indexOf("X11") >= 0) return "UNIX";
return "";
}
function GetNavigatorName_AN(){
if(navigator.IBM_HPR) return "HomepageReader";
aName = navigator.userAgent.toUpperCase();
if (aName.indexOf("SAFARI") >= 0) return "Safari";
if (aName.indexOf("CHIMERA") >= 0) return "Camino";
if (aName.indexOf("OPERA") >= 0) return "Opera";
aName = navigator.appName.toUpperCase();
if (aName.indexOf("NETSCAPE") >= 0) return "Netscape";
if (aName.indexOf("MICROSOFT") >= 0) return "Explorer";
return "";
}