社群學習工具庫休閒

繁体中文

首頁 > web前端 > js教程 > javascript 遮照层效果_javascript技巧

javascript 遮照层效果_javascript技巧

WBOY

發布： 2016-05-16 18:46:25

原創

993 人瀏覽過

想了想,还是发出来吧.虽然面向对象还不是很明白.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title></title> 
<style type="text/css"> 
* { padding:0; margin:0; list-style:none; } 
html{ height:100%;}

body { font-family:Verdana, Geneva, sans-serif; font-size:14px;height:100%; line-height:26px; }

#wrap { width:960px; margin:0 auto; height:auto; }

#divId_no_click { position:absolute; display:none; top:0; left:0; width: 100%; height:100%; background-color: #555; z-index: 9999; filter: alpha(opacity=10); opacity:0.3; } 
</style> 
 
 
<div id="wrap">
<a href="javascript:void(0)" id="ok">OK</a> </div> 
<div id="divId_no_click"></div> 
<script type="text/javascript"> 
function $(id) { 
return document.getElementById(id); 
}

var Class = { 
min_w:960, 
bint: function(r) { 
$(r).style.display = "block"; 
$(r).style.height =Math.max(parseInt(document.documentElement.scrollHeight),parseInt(document.documentElement.offsetHeight))+ "px"; 
    $(r).style.width = Math.max(parseInt(document.body.offsetWidth),Class.min_w)+"px"; 
}, 
x: function(r,d) { 
for (i = 1; i < r; i++) { 
var c = document.createElement("div"); 
c.innerHTML = i; 
$(d).appendChild(c); 
} 
}, 
res: function(r,wr) { 
$(r).style.width = Math.max(parseInt(document.body.offsetWidth),Class.min_w)+"px"; 
     $(r).style.height =Math.max(parseInt(document.documentElement.scrollHeight),parseInt(document.documentElement.offsetHeight))+ "px"; 
}

}; 
$("ok").onclick = function() { 
     
Class.bint("divId_no_click"); 
} 
window.onresize = function() { 
Class.res("divId_no_click","wrap"); 
} 
Class.x(10,"wrap"); 
</script>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

还可以把上篇文章的弹出层居中效果的制作和本例一起加个

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<meta name="author" content="Stri"> 
<title></title> 
<style type="text/css"> 
* { padding:0; margin:0; list-style:none; } 
#a { width:380px; height:80px; border:5px solid #d3d3d3; background-color:#f7f7f7; position:absolute; padding:10px; z-index:999999; } 
a.btn { display:block; width:80px; cursor:pointer; background-color:#f7f7f7; padding:2px 0px; border:1px solid #d5d5d5; vertical-align:middle; text-align:center; margin:50px auto 5px; text-decoration:none; } 
a:hover { background-color:#333; color:#fff; font-weight:bold; } 
html { height:100%; } 
body { font-family:Verdana, Geneva, sans-serif; font-size:14px; height:100%; line-height:26px; } 
#wrap { width:960px; margin:0 auto; height:auto; } 
#divId_no_click { position:absolute; display:none; top:0; left:0; width: 100%; height:100%; background-color: #555; z-index: 9999; filter: alpha(opacity=10); opacity:0.3; } 
#aa { position:fixed; bottom:20px; right:10px; } 
</style> 
<script language="javascript" type="text/javascript"> 
var drg=true; 
var ns=(document.all) ? false : true; 
function divcenter() 
{remove(); 
var c=document.createElement("div"); 
document.body.appendChild(c); 
c.setAttribute("id","a"); 
        c.setAttribute("dragable","dragable"); 
        c.onmousedown=foo; 
    var divId=document.getElementById("a"); 
     divId.innerHTML+="出现代码异常!<br>错误编号:0015;";     
//divId.style.left=(document.documentElement.clientWidth-divId.clientWidth)/2+document.documentElement.scrollLeft+"px"; 
//setTimeout(function(){divId.style.top=(document.documentElement.clientHeight-divId.clientHeight)/2+document.documentElement.scrollTop-50+"px";},100); 
h_w(300,80); 
} 
//移除 
function remove(){ 
    if(document.getElementById("a")) 
    {document.body.removeChild(document.getElementById("a")); 
        }} 
         
function foo(){ 
    if(drg){ 
        if(document.getElementById("a")!=null) 
        { 
            obj=document.getElementById("a"); 
            document.onmousedown=m_d; 
            document.onmouseup=m_u; 
            } 
        } 
        else 
        { 
         
         document.onmousemove=no_f; 
         document.onmousedown=no_f; 
         document.onmouseup=no_f; 
         } 
} 
function m_d(e){ 
     document.onmousemove=m_m; 
     x=(ns)?e.pageX:event.x; 
     y=(ns)?e.pageY:event.y; 
     cx=obj.offsetLeft-x; 
     cy=obj.offsetTop-y; 
     
     } 
function m_m(e){ 
     
     drg=false; 
     x=(ns)?e.pageX:event.x; 
     y=(ns)?e.pageY:event.y; 
     obj.style.left=(cx+x)+"px"; 
     obj.style.top=(cy+y)+"px"; 
     
    } 
function m_u(){ 
    drg=true; 
    document.onmousedown=no_f; 
    document.onmousemove=no_f; 
    document.onmouseup=no_f; 
    } 
function no_f(){ 
    return false;} 
     
    function h_w(a,b){ 
    divId=document.getElementById("a"); 
    divId.style.width="0px"; 
    divId.style.height="0px"; 
    var s=function(){ 
        var w=parseInt(divId.style.width); 
        if(w<a){ 
            divId.style.width=w+Math.ceil((a-w)/20)+"px"; 
            divId.style.left=(document.documentElement.clientWidth-divId.clientWidth)/2+document.documentElement.scrollLeft+"px";} 
            else 
            {clearInterval(st); divId.style.width=a+"px";}     
             
        } 
    var t=function(){ 
        var h=parseInt(divId.style.height); 
        if(h<b){ 
            divId.style.height=h+Math.ceil((b-h)/10)+"px"; 
        divId.style.top=(document.documentElement.clientHeight-divId.clientHeight)/2+document.documentElement.scrollTop-10+"px";} 
            else 
            {clearInterval(tt); divId.style.height=b+"px";}     
             
        } 
         
        var st = window.setInterval(s,1); 
        var tt=window.setInterval(t,1); 
     
} 
</script> 
 
 
<div id="divId_no_click"></div> 
<div id="wrap"><a href="javascript:void(0);" id="aa">提交</a></div> 
<script type="text/javascript"> 
function $(id) { 
return document.getElementById(id); 
} 
var Class = { 
min_w:960, 
bint: function(r) { 
$(r).style.display = "block"; 
$(r).style.height =Math.max(parseInt(document.documentElement.scrollHeight),parseInt(document.documentElement.offsetHeight))+ "px"; 
    $(r).style.width = Math.max(parseInt(document.body.offsetWidth),Class.min_w)+"px"; 
}, 
x: function(r,d) { 
for (i = 1; i < r; i++) { 
var c = document.createElement("div"); 
c.innerHTML = i; 
$(d).appendChild(c); 
} 
}, 
res: function(r,wr) { 
$(r).style.width = Math.max(parseInt(document.body.offsetWidth),Class.min_w)+"px"; 
     $(r).style.height =Math.max(parseInt(document.documentElement.scrollHeight),parseInt(document.documentElement.offsetHeight))+ "px"; 
} 
}; 
$("aa").onclick = function() { 
    divcenter(); 
Class.bint("divId_no_click"); 
} 
window.onresize = function() { 
Class.res("divId_no_click","wrap"); 
} 
Class.x(100,"wrap"); 
</script>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

主要代码:

复制代码代码如下:

var Class = { 
min_w:960, 
bint: function(r) { 
$(r).style.display = "block"; 
$(r).style.height =Math.max(parseInt(document.documentElement.scrollHeight),parseInt(document.documentElement.offsetHeight))+ "px"; 
$(r).style.width = Math.max(parseInt(document.body.offsetWidth),Class.min_w)+"px"; 
}, 
x: function(r,d) { 
for (i = 1; i var c = document.createElement("div"); 
c.innerHTML = i; 
$(d).appendChild(c); 
} 
}, 
res: function(r,wr) { 
$(r).style.width = Math.max(parseInt(document.body.offsetWidth),Class.min_w)+"px"; 
$(r).style.height =Math.max(parseInt(document.documentElement.scrollHeight),parseInt(document.documentElement.offsetHeight))+ "px"; 
} 
};

相關標籤：

javascript

來源：php.cn

上一篇：Mootools 1.2教程滑动效果（Slide）_Mootools 下一篇：Mootools 1.2教程同时进行多个形变动画_Mootools

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

作者最新文章

什麼是 NullPointerException，如何修復它？

2024-10-22 09:46:29
從新手到程式設計師：您的旅程從 C 基礎知識開始

2024-10-13 13:53:41
使用 PHP 解鎖 Web 開發：初學者指南

2024-10-12 12:15:51
揭秘 C：為新程式設計師提供一條清晰簡單的道路

2024-10-11 22:47:31
釋放您的編碼潛力：絕對初學者的 C 編程

2024-10-11 19:36:51
釋放你內心的程式設計師：C 絕對初學者

2024-10-11 15:50:41
使用 C 自動化您的生活：適合初學者的腳本和工具

2024-10-11 15:07:41
PHP 變得簡單：Web 開發的第一步

2024-10-11 14:21:21
使用 Python 建立任何東西：釋放創造力的初學者指南

2024-10-11 12:59:11
編碼的關鍵：為初學者釋放 Python 的力量

2024-10-11 12:17:31

最新問題

僅 CSS 方法可在單擊時動態修改圖片 src，無需使用 JavaScript 我需要僅使用css更改滑鼠單擊時圖像的src喜歡img:active{}

來自於 2024-04-06 19:25:49

0

1

505

放大 d3.js 時散佈圖點不會保持值這是我第一次使用d3.js，所以請耐心等待。我在vue.js檔案中將其作為純JavaScript實作。我正在嘗試製作具有縮放功能的散點圖。到目前為止，我幾乎一切正常，但當我縮放時，...

來自於 2024-04-06 18:16:26

0

1

403

供應商特定偽元素上的 JavaScript 懸停事件我有以下htmlinput標籤。 $("input[type='range']::-webkit-slider-thumb").on('hover',funct...

來自於 2024-04-06 15:35:24

0

1

274

使用 Javascript / Jquery 提交表單且不含按鈕我試圖透過呼叫JavaScript函數並使用JQUERY/PHP執行表單來提交沒有按鈕的表單。我希望表單在後端靜默執行，而無需重新載入頁面。不幸的是，它不斷傳回JavaScript...

來自於 2024-04-06 14:54:03

0

2

421

使用「折疊顯示器」類別自訂 Bootstrap 手風琴標題的外觀我想設定具有類別collapseshow的面板的卡片標題樣式。在此範例中，它是第一個面板。我嘗試使用CSS來使用.accordion.card.card-headerbutton....

來自於 2024-04-06 12:53:11

0

1

376

相關專題

更多>

熱門推薦

熱門教學

更多>

相關教學

熱門推薦

最新課程

最新ThinkPHP 5.1全球首發影片教學(60天成就PHP大牛線上訓練課程)

1423000
php入門教程之一週學會PHP

4268431
JAVA 初級入門影片教學

2534211
小甲魚零基礎入門學習Python影片教學

507257
PHP 零基礎入門教學

862389

最新下載

更多>

網站特效

網站源碼

網站素材

前端模板