communauté Apprendre Bibliothèque d'outils Loisirs

Français

Maison > interface Web > js tutoriel > javascript 遮照层效果_javascript技巧

javascript 遮照层效果_javascript技巧

WBOY

Libérer： 2016-05-16 18:46:25

original

993 Les gens l'ont consulté

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

<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"; 
} 
};

Étiquettes associées：

javascript

source：php.cn

Article précédent：Mootools 1.2教程滑动效果（Slide）_Mootools Article suivant：Mootools 1.2教程同时进行多个形变动画_Mootools

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur

Qu'est-ce qu'une NullPointerException et comment y remédier ?

2024-10-22 09:46:29
De novice à codeur : votre voyage commence par les principes fondamentaux du C

2024-10-13 13:53:41
Débloquer le développement Web avec PHP : guide du débutant

2024-10-12 12:15:51
Démystifier C : un chemin clair et simple pour les nouveaux programmeurs

2024-10-11 22:47:31
Libérez votre potentiel de codage : programmation C pour les débutants absolus

2024-10-11 19:36:51
Libérez votre programmeur intérieur : C pour les débutants absolus

2024-10-11 15:50:41
Automatisez votre vie avec C : scripts et outils pour les débutants

2024-10-11 15:07:41
PHP Made Easy : vos premiers pas dans le développement Web

2024-10-11 14:21:21
Construisez n'importe quoi avec Python : un guide du débutant pour libérer votre créativité

2024-10-11 12:59:11
La clé du codage : libérer la puissance de Python pour les débutants

2024-10-11 12:17:31

Derniers numéros

Méthode CSS uniquement pour modifier dynamiquement le src de l'image au clic sans utiliser JavaScript Je dois changer le src d'une image en cliquant sur la souris en utilisant uniquement du CS...

Depuis 2024-04-06 19:25:49

0

1

505

Les points de nuage de points ne conservent pas leurs valeurs lors du zoom dans d3.js C'est la première fois que j'utilise d3.js, alors soyez indulgents avec moi. Je l'ai implé...

Depuis 2024-04-06 18:16:26

0

1

403

Événements de survol JavaScript sur des pseudo-éléments spécifiques au fournisseur Il s'agit de HTMLinput.$("input[type='range']::-webkit-slider-thumb").on('hover'...

Depuis 2024-04-06 15:35:24

0

1

274

Soumettre le formulaire sans bouton en utilisant Javascript/Jquery J'essaie de soumettre un formulaire sans bouton en appelant une fonction JavaScript et en ...

Depuis 2024-04-06 14:54:03

0

2

421

Personnalisez l'apparence des en-têtes accordéon Bootstrap à l'aide de la classe CollapseDisplay Je souhaite styliser le titre de la carte d'un panneau avec la classeeffondrementshow. Dan...

Depuis 2024-04-06 12:53:11

0

1

376

Rubriques connexes

Plus>

Recommandations populaires

Tutoriels populaires

Plus>

Tutoriels associés

Recommandations populaires

Derniers cours

Derniers téléchargements

Plus>

effets Web

Code source du site Web

Matériel du site Web

Modèle frontal