純粋な JavaScript_javascript スキルで実装された完璧なグラデーションポップアップレイヤーエフェクトコード-jsチュートリアル-php.cn

純粋な JavaScript_javascript スキルで実装された完璧なグラデーションポップアップレイヤーエフェクトコード

WBOY

リリース： 2016-05-16 18:30:22

オリジナル

1067 人が閲覧しました

タイトルにあるように、この記事では純粋なスクリプト JavaScript を使用してグラデーションポップアップレイヤーを実装します。アイデアも非常にシンプルです。IFrame を使用してそれをカバーし、DIV を使用してポップアップレイヤーのコンテンツを表示します。最後に、組み込み関数 setInterval() と clearInterval() を使用してグラデーションを実装します。原理は非常に単純ですが、DOM オブジェクト/要素の正確な制御に注意を払う必要があります。コードは比較的単純なので、ここでは詳しく説明しません。次のコードは IE6 と FF3.5 でテストに合格しました。
スクリプト Flyout.js:

コードをコピーコードは次のとおりです:

// JScript ファイル 
if (navigator.userAgent.toLowerCase().indexOf('msie') > -1) { 
window.isIE = true; 
window.isIE6 = navigator.appVersion.indexOf("MSIE 6.0;") > -1; 
window.isIE7 = navigator.appVersion.indexOf("MSIE 7.0;") > -1; 
window.isIE8 = navigator.appVersion.indexOf("MSIE 8.0;") > -1; 
} 
var $ = function(objID) { return document.getElementById(objID) }; 
var _flyout; 
var _fadeTimer; 
function showflyout(divWidth, divHeight, paddingWidth) { 
var flyout = function() { 
} 
flyout.prototype = { 
clientWidth: document.documentElement.clientWidth, 
clientHeight : document.documentElement.clientHeight、
scrollWidth: document.documentElement.scrollWidth、
scrollHeight: document.documentElement.scrollHeight、
iframeID: "envelopIframe"、
divID: "popupcontent"、
 iframebgColor: "#888888", 
show: function(divContent) { 
//エンベロープを作成 iframe 
cssText = "position:absolute; z-index:100; background-color:#888888; border-幅:0px; フィルター:アルファ(不透明度=0); 不透明度:0.0; 
cssText = "left:0px;"; 
cssText = "top:0px;"; 
cssText = "width:" this.scrollWidth "px;"; 
cssText = "高さ:" this.scrollHeight "px;"; 
this.create("iframe", this.iframeID, cssText, "Cppl_IFrameSrc.htm", ""); 
_fadeTimer = setInterval(function() { fadeIframe("envelopIframe", 0.05, 0, 0.5, true) }, 5); 
//フライアウトを作成します
var cssText = ""; 
cssText = "表示:ブロック; _位置:絶対; 位置:固定; z-インデックス:101; 境界線:固体 1px グレー; 背景色:白;"; 
cssText = "left:" (this.clientWidth - divWidth - paddingWidth) / 2 "px;"; 
cssText = "top:" (this.clientHeight - divHeight - paddingWidth) / 2 "px;"; 
cssText = "width:" (divWidthpaddingWidth) "px;"; 
cssText = "高さ: " (divHeight paddingWidth) "px;"; 
this.create("div", this.divID, cssText, "", divContent); 
}, 
create: function(type, id, csstext, iframesrc, innerhtml) { 
var obj = document.createElement(type); 
if (iframesrc.length > 0) { 
obj.src = iframesrc; 
} 
obj.setAttribute("id", id); 
obj.style.cssText = csstext; 
if (innerhtml.length > 0) { 
obj.innerHTML = innerhtml; 
} 
document.body.appendChild(obj); 
if (iframesrc.length > 0) { 
if (window.isIE) { 
window.envelopIframe.document.bgColor = this.iframebgColor; 
} 
} 
}, 
close: function() { 
var objIframe = document.getElementById(this.iframeID); 
var objDiv = document.getElementById(this.divID); 
if (objIframe && objDiv) { 
document.body.removeChild(objIframe); 
document.body.removeChild(objDiv); 
} 
}, 
onresize: function() { 
var objIframe = document.getElementById(this.iframeID); 
var objDiv = document.getElementById(this.divID); 
if (objIframe && objDiv) { 
objIframe.style.width = document.documentElement.scrollWidth "px"; 
objIframe.style.height = document.documentElement.scrollHeight "px"; 
objDiv.style.left = (document.documentElement.clientWidth - divWidth) / 2 "px"; 
objDiv.style.top = (document.documentElement.clientHeight - divHeight) / 2 "px"; 
} 
}, 
onscroll: function() { 
var objDiv = document.getElementById(this.divID); 
if (objDiv) { 
objDiv.style.left = (document.documentElement.clientWidth - divWidth) / 2 document.documentElement.scrollLeft "px"; 
objDiv.style.top = (document.documentElement.clientHeight - divHeight) / 2 document.documentElement.scrollTop "px"; 
} 
} 
}; 
_flyout = 新しい flyout(); 
_flyout.show("これはフライアウトです。フライアウトを閉じる
"); 
} 
関数 closeflyout() { 
clearInterval(_fadeTimer); 
_fadeTimer = setInterval(function() { fadeIframe("envelopIframe", 0.05, 0, 0.5, false) }, 5); 
} 
window.onresize = function() { 
if (_flyout) { 
_flyout.onresize(); 
} 
}; 
window.onscroll = function() { 
if (_flyout && isIE6) { 
_flyout.onscroll(); 
} 
}; 
関数 fadeIframe(objId, 速度, minOpacity, maxOpacity, flag) { 
var ダイアログ = $(objId); 
if (ダイアログ) { 
var 値; 
if (フラグ) { 
if (parseFloat(dialog.style.opacity) <= maxOpacity) { 
value = parseFloat(dialog.style.opacity) 速度; 
dialog.style.filter = 'alpha(opacity=' value * 100 ')'; 
dialog.style.opacity = ''値 ''; 
} 
else { 
clearInterval(_fadeTimer); 
} 
} 
else { 
if (parseFloat(dialog.style.opacity) >= minOpacity) { 
value = parseFloat(dialog.style.opacity) - 速度; 
dialog.style.filter = 'alpha(opacity=' value * 100 ')'; 
dialog.style.opacity = ''値 ''; 
} 
else { 
clearInterval(_fadeTimer); 
if (_flyout) { 
_flyout.close(); 
} 
} 
} 
} 
} 