L'exemple de cet article décrit l'implémentation d'effets de fenêtres contextuelles déplaçables et fermables à l'aide de JS. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :
Exécutez cet exemple, cliquez sur le texte et une fenêtre apparaîtra. Il s'agit en fait d'un calque contextuel. Ce calque contextuel peut être déplacé avec la souris. De plus, l'exemple montre le code spécifique pour. calque de texte contextuel et calque d'image contextuelle en utilisant cette méthode. Veuillez sélectionner en fonction de votre choix.
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-draw-close-able-alert-dlg-demo/
Le code spécifique est le suivant :
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>弹出层、弹窗效果+拖曳功能 </title>
<style type="text/css">
*{ margin:0px; padding:0px;}
body{ font-size:12px; font:Arial, Helvetica, sans-serif; margin:25PX 0PX; background:#eee;}
.botton{ color:#F00; cursor:pointer;}
.mybody{width:600px; margin:0 auto; height:1500px; border:1px solid #ccc; padding:20px 25px; background:#fff}
#cwxBg{ position:absolute; display:none; background:#000; width:100%; height:100%; left:0px; top:0px; z-index:1000;}
#cwxWd{ position:absolute; display:none; border:10px solid #CCC; padding:10px;background:#FFF; z-index:1500;}
#cwxCn{ background:#FFF; display:block;}
.imgd{ width:400px; height:300px;}
</style>
</head>
<body>
<!--弹出窗-->
<div class="mybody">
<div class="botton" id="testClick">点击测试</div>
asdasdasdasdasdasdasd<br/>这里是一段文字哦！<div class="botton" id="testClick1">点击测试</div>
</div>
<script type="text/javascript">
C$('testClick').onclick = function(){
var neirong = '<div><img src="http://www.jb51.net/images/logo.gif" class="imgd" /></div>';
cwxbox.box.show(neirong);
}
C$('testClick1').onclick = function(){
var neirong = '123456789132456789';
cwxbox.box.show(neirong,3);
}
function C$(id){return document.getElementById(id);}
//定义窗体对象
var cwxbox = {};
cwxbox.box = function(){
var bg,wd,cn,ow,oh,o = true,time = null;
return {
show:function(c,t,w,h){
if(o){
bg = document.createElement('div'); bg.id = 'cwxBg';
wd = document.createElement('div'); wd.id = 'cwxWd';
cn = document.createElement('div'); cn.id = 'cwxCn';
document.body.appendChild(bg);
document.body.appendChild(wd);
wd.appendChild(cn);
bg.onclick = cwxbox.box.hide;
window.onresize = this.init;
window.onscroll = this.scrolls;
o = false;
}
if(w && h){
var inhtml = '<iframe src="'+ c +'" width="'+ w +'" height="'+ h +'" frameborder="0"></iframe>';
}else{
var inhtml = c;
}
cn.innerHTML = inhtml;
oh = this.getCss(wd,'offsetHeight');
ow = this.getCss(wd,'offsetWidth');
this.init();
this.alpha(bg,50,1);
this.drag(wd);
if(t){
time = setTimeout(function(){cwxbox.box.hide()},t*1000);
}
},
hide:function(){
cwxbox.box.alpha(wd,0,-1);
clearTimeout(time);
},
init:function(){
bg.style.height = cwxbox.page.total(1)+'px';
bg.style.width = '';
bg.style.width = cwxbox.page.total(0)+'px';
var h = (cwxbox.page.height() - oh) /2;
wd.style.top=(h+cwxbox.page.top())+'px';
wd.style.left=(cwxbox.page.width() - ow)/2+'px';
},
scrolls:function(){
var h = (cwxbox.page.height() - oh) /2;
wd.style.top=(h+cwxbox.page.top())+'px';
},
alpha:function(e,a,d){
clearInterval(e.ai);
if(d==1){
e.style.opacity=0;
e.style.filter='alpha(opacity=0)';
e.style.display = 'block';
}
e.ai = setInterval(function(){cwxbox.box.ta(e,a,d)},40);
},
ta:function(e,a,d){
var anum = Math.round(e.style.opacity*100);
if(anum == a){
clearInterval(e.ai);
if(d == -1){
e.style.display = 'none';
if(e == wd){
this.alpha(bg,0,-1);
}
}else{
if(e == bg){
this.alpha(wd,100,1);
}
}
}else{
var n = Math.ceil((anum+((a-anum)*.5)));
n = n == 1 ? 0 : n;
e.style.opacity=n/100;
e.style.filter='alpha(opacity='+n+')';
}
},
getCss:function(e,n){
var e_style = e.currentStyle ? e.currentStyle : window.getComputedStyle(e,null);
if(e_style.display === 'none'){
var clonDom = e.cloneNode(true);
clonDom.style.cssText = 'position:absolute; display:block; top:-3000px;';
document.body.appendChild(clonDom);
var wh = clonDom[n];
clonDom.parentNode.removeChild(clonDom);
return wh;
}
return e[n];
},
drag:function(e){
var startX,startY,mouse;
mouse = {
mouseup:function(){
if(e.releaseCapture)
{
e.onmousemove=null;
e.onmouseup=null;
e.releaseCapture();
}else{
document.removeEventListener("mousemove",mouse.mousemove,true);
document.removeEventListener("mouseup",mouse.mouseup,true);
}
},
mousemove:function(ev){
var oEvent = ev||event;
e.style.left = oEvent.clientX - startX + "px";
e.style.top = oEvent.clientY - startY + "px";
}
}
e.onmousedown = function(ev){
var oEvent = ev||event;
startX = oEvent.clientX - this.offsetLeft;
startY = oEvent.clientY - this.offsetTop;
if(e.setCapture)
{
e.onmousemove= mouse.mousemove;
e.onmouseup= mouse.mouseup;
e.setCapture();
}else{
document.addEventListener("mousemove",mouse.mousemove,true);
document.addEventListener("mouseup",mouse.mouseup,true);
}
}
}
}
}()
cwxbox.page = function(){
return{
top:function(){return document.documentElement.scrollTop||document.body.scrollTop},
width:function(){return self.innerWidth||document.documentElement.clientWidth||document.body.clientWidth},
height:function(){return self.innerHeight||document.documentElement.clientHeight||document.body.clientHeight},
total:function(d){
var b=document.body, e=document.documentElement;
return d?Math.max(Math.max(b.scrollHeight,e.scrollHeight),Math.max(b.clientHeight,e.clientHeight)):
Math.max(Math.max(b.scrollWidth,e.scrollWidth),Math.max(b.clientWidth,e.clientWidth))
}
}
}()
</script>
</body>
</html>
J'espère que cet article sera utile à la programmation JavaScript de chacun.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
