JS implémente le code de la boîte contextuelle de l'effet Sina Weibo avec les compétences de masque layer

JS implémente le code de la boîte contextuelle de l'effet Sina Weibo avec les compétences de masque layer_javascript

WBOY

Libérer： 2016-05-16 15:36:57

original

1630 Les gens l'ont consulté

L'exemple de cet article décrit l'implémentation JS du code de la boîte contextuelle de l'effet Sina Weibo avec un calque de masque. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Il s'agit d'une boîte pop-up avec effet Sina Weibo, code JS prêt à l'emploi, compatible avec IE6 et tous les navigateurs grand public. Sina Weibo dispose d'une couche contextuelle qui peut être glissée et déposée, ce qui la rend facile et confortable à utiliser et conforme aux habitudes de navigation des utilisateurs. Je recommande le code à tous les internautes.

La capture d'écran de l'effet en cours d'exécution est la suivante :

L'adresse de la démo en ligne est la suivante :

http://demo.jb51.net/js/2015/js-sina-zzxg-dlg-demo/

Le code spécifique est le suivant :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>弹出层并可拖拽</title>
<style>
body,html{height:2000px;}
body,div,h2{margin:0;padding:0;}
body{font:12px/1.5 Tahoma;}
center{padding-top:10px;}
button{cursor:pointer;}
#overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000;opacity:0.5;filter:alpha(opacity=50);display:none;}
*html #overlay{position:absolute;}
#win{position:absolute;top:50%;left:50%;width:400px;height:200px;background:#fff;border:4px solid #f90;margin:-102px 0 0 -202px;display:none;}
h2{font-size:12px;height:18px;text-align:right;background:#FC0;border-bottom:3px solid #f90;padding:5px;cursor:move;}
h2 span{color:#f90;cursor:pointer;background:#fff;border:1px solid #f90;padding:0 2px;}
</style>
<script>
window.onload = function ()
{
 var shit = !-[1, ];
 var oWin = document.getElementById("win");
 var oLay = document.getElementById("overlay"); 
 var oBtn = document.getElementsByTagName("button")[0];
 var oClose = document.getElementById("close");
 var oH2 = oWin.getElementsByTagName("h2")[0];
 var bDrag = false;
 var disX = disY = 0;
 var iScrollT = document.documentElement.scrollTop || document.body.scrollTop;
 var iScrollL = document.documentElement.scrollLeft || document.body.scrollLeft;
 oBtn.onclick = function ()
 {
  oLay.style.display = "block";
  oWin.style.display = "block";
  shit && (oLay.style.height = document.body.offsetHeight + "px");
 };
 oClose.onclick = function ()
 {
  oLay.style.display = "none";
  oWin.style.display = "none";  
 };
 oClose.onmousedown = function (event)
 {
  (event || window.event).cancelBubble = true;
 };
 oH2.onmousedown = function (event)
 {  
  var event = event || window.event;
  bDrag = true;
  disX = event.clientX - oWin.offsetLeft + iScrollL;
  disY = event.clientY - oWin.offsetTop + iScrollT;  
  this.setCapture && this.setCapture();  
  return false
 };
 document.onmousemove = function (event)
 {
  if (!bDrag) return;
  var event = event || window.event;
  var iL = event.clientX - disX + iScrollL;
  var iT = event.clientY - disY + iScrollT;
  var maxL = document.body.clientWidth - oWin.offsetWidth;
  var maxT = document.body.clientHeight - oWin.offsetHeight;  
  iL = iL < 0 &#63; 0 : iL;
  iL = iL > maxL &#63; maxL : iL;   
  iT = iT < 0 &#63; 0 : iT;
  iT = iT > maxT &#63; maxT : iT;
  oWin.style.marginTop = oWin.style.marginLeft = 0;
  oWin.style.left = iL + "px";
  oWin.style.top = iT + "px";  
  return false
 };
 document.onmouseup = window.onblur = oH2.onlosecapture = function ()
 {
  bDrag = false;    
  oH2.releaseCapture && oH2.releaseCapture();
 };
};
</script>
</head>
<body>
<div id="overlay"></div>
<div id="win"><h2><span id="close">×</span></h2></div>
<center><button>弹出层</button></center>
</body>
</html>

Copier après la connexion

J'espère que cet article sera utile à la programmation JavaScript de chacun.