欧美亚洲网站,亚洲h精品动漫在线观看,亚洲传媒在线

View Post

用層模擬彈出窗口

HTML

<head>

<title>div彈出</title>

</head>

<body>

<div id="leftDiv" style="width: 800px; position: absolute; left: -410px; top: 100px; display:none;

border: solid 1px red;">

<div>left    <a href="javascript:void(0);" onclick="divHide('leftDiv','left','')">close</a></div>

<tr>

</tr>

</table>

</div>

middle    <a href="javascript:void(0);" onclick="divHide('middleDiv','center','')">close</a>

</div>

<div id="rightDiv" style="width: 400px; position: absolute; right: 0px; top: 100px; display:none;

border: solid 1px red;">

<a href="javascript:void(0);" onclick="divHide('rightDiv','right','speed:5000;')">close</a>    right

</div>

</body>

</html>

Script

//字符的trim()方法

String.prototype.trim= function(){

// 用正則表達式將前后空格

// 用空字符串替代。

return this.replace(/(^\s*)|(\s*$)/g, "");

}

//驗證是否為數字

function isNumber(oNum){

if(!oNum) return false;

var strP=/^\d+(\.\d+)?$/;

if(!strP.test(oNum)) return false;

try{

if(parseFloat(oNum)!=oNum) return false;

}

catch(ex){

return false;

}

return true;

}

//***************************************頁面彈出DIV代碼_SHOW Felix 2007-12-07***************************************//

//頁面跳出DIV

function divShow(divId, showType, showProperty){

//獲得目標DIV

var tagDiv = document.getElementById(divId);

if(tagDiv == null){

return;

}

tagDiv.style.display = "";

//設置默認屬性

var divWidth = tagDiv.offsetWidth;//目標DIV的寬度

var divHeight = tagDiv.offsetHeight;//目標DIV的高度

var divLeft = (Math.max(document.documentElement.offsetWidth, document.body.scrollWidth) - divWidth)/2;//目標DIV左邊定位

var divTop = (Math.max(document.documentElement.offsetHeight, document.body.scrollHeight) - divHeight)/2;//目標DIV頂端定位

var bgOpacity = 30;//背景的透明度 0為全透明 100為不透明

var scrollSpeed = 100;//從邊框滾動出來的DIV的滾出速度單位:毫秒

//讀取設置屬性

var propertys = showProperty.split(';');

for(var i=0;i<propertys.length;i++){

var property = propertys[i].trim().split(':');

if(property.length==2){

var propertyValue = property[1].trim().replace("px","");

if(!isNumber(propertyValue)){return;}

switch(property[0].trim().toLowerCase()){

case "width":

divWidth = propertyValue;

break;

case "height":

divHeight = propertyValue;

break;

case "left":

divLeft = propertyValue;

break;

case "top":

divTop = propertyValue;

break;

case "opacity":

bgOpacity = propertyValue;

break;

case "speed":

scrollSpeed = propertyValue;

break;

}

//根據彈出類型，調用不同方法

switch(showType.toLowerCase()){

case "left":

showLeftDiv(divId, divWidth + 10, scrollSpeed, 0);

break;

case "right":

document.body.style.overflowX='hidden';

showRightDiv(divId, divWidth + 10, scrollSpeed, 0);

break;

case "center":

showCenterDiv(tagDiv, divWidth, divHeight, divLeft, divTop, bgOpacity);

break;

}

//從左邊彈出DIV

function showLeftDiv(divId, divWidth, scrollSpeed, i){

//獲得目標DIV

var tagDiv = document.getElementById(divId);

if(tagDiv == null){

return;

}

if(i<=20){

tagDiv.style.left = divWidth * (-1) * (1 - Math.sin((3.14/2)*(i/20)));

i++;

window.setTimeout("showLeftDiv('"+divId+"',"+divWidth+","+scrollSpeed+","+i+")",scrollSpeed/20);

}

//從右邊彈出DIV

function showRightDiv(divId, divWidth, scrollSpeed, i){

//獲得目標DIV

var tagDiv = document.getElementById(divId);

if(tagDiv == null){

return;

}

if(i<=20){

tagDiv.style.right = divWidth * (-1) * (1 - Math.sin((3.14/2)*(i/20)));

i++;

window.setTimeout("showRightDiv('"+divId+"',"+divWidth+","+scrollSpeed+","+i+")",scrollSpeed/20);

} else{

document.body.style.overflowX='';

}

//從中間彈出DIV

function showCenterDiv(tagDiv, divWidth, divHeight, divLeft, divTop, bgOpacity){

var bgDiv = document.createElement("div"); //最外層div

var iframe = document.createElement("iframe"); //協助wc.div蓋select的iframe

bgDiv.setAttribute("id", "bgDiv_S");

iframe.setAttribute("id", "iframe_S");

bgDiv.style.position="absolute";

bgDiv.style.background="#000000";

bgDiv.style.left=0;

bgDiv.style.top=0;

bgDiv.style.zIndex="99";

bgDiv.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=" + bgOpacity + ",finishOpacity=75)";

bgDiv.style.opacity=bgOpacity/100;

iframe.style.position="absolute";

iframe.style.background="#000000";

iframe.style.left=0;

iframe.style.top=0;

iframe.style.zIndex="98";

iframe.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0,finishOpacity=75)";

iframe.style.opacity=0;

tagDiv.style.position="absolute";

if(tagDiv.style.background == ""){

tagDiv.style.background = "#FFF";

}

tagDiv.style.zIndex="101";

tagDiv.style.width = divWidth + "px";

tagDiv.style.height = divHeight + "px";

document.body.appendChild(iframe);

document.body.appendChild(bgDiv);

setPosition();

//window.onscroll=setPosition;

//window.onresize=setPosition;

function setPosition(){

bgDiv.style.height = iframe.style.height = Math.max(document.documentElement.scrollHeight, document.documentElement.offsetHeight, document.body.scrollHeight) + "px";

bgDiv.style.width = iframe.style.width = Math.max(document.documentElement.scrollWidth, document.documentElement.offsetWidth) + "px";

tagDiv.style.left = divLeft>0 ? divLeft:0;

tagDiv.style.top = divTop>0 ? Math.max(document.documentElement.scrollTop,document.body.scrollTop) + divTop:Math.max(document.documentElement.scrollTop,document.body.scrollTop);

}

//********************************************頁面彈出DIV代碼_SHOW End***********************************************//

//***************************************頁面彈出DIV代碼_HIDE Felix 2007-12-07***************************************//

//跳出的DIV隱藏

function divHide(divId, hideType, hideProperty){

//獲得目標DIV

var tagDiv = document.getElementById(divId);

if(tagDiv == null){

return;

}

tagDiv.style.display = "";

//設置默認屬性

var divWidth = tagDiv.offsetWidth;//目標DIV的寬度

var divHeight = tagDiv.offsetHeight;//目標DIV的高度

var divLeft = (Math.max(document.documentElement.offsetWidth, document.body.scrollWidth) - divWidth)/2;//目標DIV左邊定位

var divTop = (Math.max(document.documentElement.offsetHeight, document.body.scrollHeight) - divHeight)/2;//目標DIV頂端定位

var bgOpacity = 30;//背景的透明度 0為全透明 100為不透明

var scrollSpeed = 100;//從邊框滾動出來的DIV的滾出速度單位:毫秒

//讀取設置屬性

var propertys = hideProperty.split(';');

for(var i=0;i<propertys.length;i++){

var property = propertys[i].trim().split(':');

if(property.length==2){

var propertyValue = property[1].trim().replace("px","");

if(!isNumber(propertyValue)){return;}

switch(property[0].trim().toLowerCase()){

case "width":

divWidth = propertyValue;

break;

case "height":

divHeight = propertyValue;

break;

case "left":

divLeft = propertyValue;

break;

case "top":

divTop = propertyValue;

break;

case "opacity":

bgOpacity = propertyValue;

break;

case "speed":

scrollSpeed = propertyValue;

break;

}

//根據彈出類型，調用不同方法

switch(hideType.toLowerCase()){

case "left":

hideLeftDiv(divId, divWidth + 10, scrollSpeed, 0);

break;

case "right":

document.body.style.overflowX='hidden';

hideRightDiv(divId, divWidth + 10, scrollSpeed, 0);

break;

case "center":

hideCenterDiv(tagDiv);

break;

}

//隱藏左邊彈出的DIV

function hideLeftDiv(divId, divWidth, scrollSpeed, i){

//獲得目標DIV

var tagDiv = document.getElementById(divId);

if(tagDiv == null){

return;

}

if(i<=20){

tagDiv.style.left = divWidth * (-1) * (Math.sin((3.14/2)*(i/20)));

i++;

window.setTimeout("hideLeftDiv('"+divId+"',"+divWidth+","+scrollSpeed+","+i+")",scrollSpeed/20);

}

//隱藏右邊彈出的DIV

function hideRightDiv(divId, divWidth, scrollSpeed, i){

//獲得目標DIV

var tagDiv = document.getElementById(divId);

if(tagDiv == null){

return;

}

if(i<=20){

tagDiv.style.right = divWidth * (-1) * (Math.sin((3.14/2)*(i/20)));

i++;

window.setTimeout("hideRightDiv('"+divId+"',"+divWidth+","+scrollSpeed+","+i+")",scrollSpeed/20);

} else{

tagDiv.style.display = "none";

document.body.style.overflowX='';

}

//隱藏中間彈出的DIV

function hideCenterDiv(tagDiv){

var bgDiv = document.getElementById("bgDiv_S"); //最外層div

var iframe = document.getElementById("iframe_S"); //協助wc.div蓋select的iframe

tagDiv.style.display = "none";

document.body.removeChild(iframe);

document.body.removeChild(bgDiv);

//window.onscroll=null;

//window.onresize=null;

}

//********************************************頁面彈出DIV代碼_HIDE End***********************************************//

posted on 2008-01-24 10:50 MingIsMe 閱讀(885) 評論(0) 編輯收藏所屬分類: 02 Script/CSS

Samuel Learning

文章分類(203)

新聞分類(52)

.NET資源

Ajax

Java開源

Mobile

WEB資源

Workflow

其他連接

大牛人

開源軟件

敏捷

數據庫

未歸類

經典框架

網絡教程

著名站點

項目管理

最新評論

View Post

用層模擬彈出窗口