interface Web
js tutoriel
JS implémente des compétences d'effets_javascript de fenêtre contextuelle déplaçables et fermables
JS implémente des compétences d'effets_javascript de fenêtre contextuelle déplaçables et fermables
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.
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Comment désactiver les publicités recommandées par 360 Browser ? Comment désactiver les publicités recommandées par 360 Browser sur PC ?
Mar 14, 2024 am 09:16 AM
Comment désactiver les publicités recommandées par 360 Browser ? Je pense que de nombreux utilisateurs utilisent 360 Browser, mais ce navigateur affiche parfois des publicités, ce qui rend de nombreux utilisateurs très angoissés. Laissez ce site présenter soigneusement aux utilisateurs comment désactiver les publicités recommandées par 360 Browser sur votre ordinateur. Comment désactiver les publicités recommandées par 360 Browser sur votre ordinateur ? Méthode 1 : 1. Ouvrez le navigateur 360 Safe. 2. Recherchez le logo « trois barres horizontales » dans le coin supérieur droit et cliquez sur [Paramètres]. 3. Recherchez [Lab] dans la barre des tâches sur le côté gauche de l'interface contextuelle et cochez [Activer la fonction « 360 Hotspot Information »]. Méthode 2 : 1. Double-cliquez d’abord
Comment désactiver Sina News Express ? Comment désactiver la fonction express ?
Mar 12, 2024 pm 09:46 PM
Le logiciel Sina News fournit de nombreuses informations sur les titres d'actualité, qui sont essentiellement diffusées par la plate-forme officielle. Le contenu de chaque article d'actualité est authentique. Vous pouvez faire glisser votre doigt de haut en bas pour rechercher et parcourir en un seul clic, ce qui rend l'atmosphère de lecture globale plus confortable. . Entrez votre numéro de téléphone portable pour vous connecter en ligne. Les chaînes d'information dans différents champs sont ouvertes. Les mises à jour 24 heures sur 24 ne manquent pas. Les actualités nationales, étrangères et locales ne manquent pas. navigation. Le contenu des actualités est tout Si vous êtes intéressé, vous pouvez également désactiver la fonction News Express, afin qu'elle ne soit pas affectée. Vous pouvez l'ouvrir à tout moment et prévisualiser les gros titres d'actualités populaires. détails aux utilisateurs de Sina News en ligne. Étapes de fonctionnement de la fonction de livraison express. Recherchez Sina News et cliquez sur le coin inférieur droit
Que dois-je faire s'il n'y a pas de rappels contextuels pour les événements du calendrier dans Win10 ? Comment récupérer si les rappels d'événements du calendrier ont disparu dans Win10 ?
Jun 09, 2024 pm 02:52 PM
Le calendrier peut aider les utilisateurs à enregistrer votre emploi du temps et même à définir des rappels. Cependant, de nombreux utilisateurs se demandent que faire si les rappels d'événements du calendrier n'apparaissent pas dans Windows 10 ? Les utilisateurs peuvent d'abord vérifier l'état de la mise à jour Windows ou vider le cache du Windows App Store pour effectuer l'opération. Laissez ce site présenter soigneusement aux utilisateurs l'analyse du problème du rappel des événements du calendrier Win10 qui n'apparaît pas. Pour ajouter des événements au calendrier, cliquez sur le programme "Calendrier" dans le menu système. Cliquez avec le bouton gauche de la souris sur une date du calendrier. Entrez le nom de l'événement et l'heure du rappel dans la fenêtre d'édition, puis cliquez sur le bouton « Enregistrer » pour ajouter l'événement. Résoudre le problème du rappel d'événement du calendrier Win10 qui n'apparaît pas
Explication détaillée sur la façon de désactiver le Centre de sécurité Windows 11
Mar 27, 2024 pm 03:27 PM
Dans le système d'exploitation Windows 11, le Centre de sécurité est une fonction importante qui aide les utilisateurs à surveiller l'état de sécurité du système, à se défendre contre les logiciels malveillants et à protéger la vie privée. Cependant, les utilisateurs peuvent parfois avoir besoin de désactiver temporairement Security Center, par exemple lors de l'installation de certains logiciels ou lors du réglage du système. Cet article présentera en détail comment désactiver le Centre de sécurité Windows 11 pour vous aider à utiliser le système correctement et en toute sécurité. 1. Comment désactiver le Centre de sécurité Windows 11 Sous Windows 11, la désactivation du Centre de sécurité ne
Recommandé : Excellent projet de détection et de reconnaissance des visages open source JS
Apr 03, 2024 am 11:55 AM
La technologie de détection et de reconnaissance des visages est déjà une technologie relativement mature et largement utilisée. Actuellement, le langage d'application Internet le plus utilisé est JS. La mise en œuvre de la détection et de la reconnaissance faciale sur le front-end Web présente des avantages et des inconvénients par rapport à la reconnaissance faciale back-end. Les avantages incluent la réduction de l'interaction réseau et de la reconnaissance en temps réel, ce qui réduit considérablement le temps d'attente des utilisateurs et améliore l'expérience utilisateur. Les inconvénients sont les suivants : il est limité par la taille du modèle et la précision est également limitée ; Comment utiliser js pour implémenter la détection de visage sur le web ? Afin de mettre en œuvre la reconnaissance faciale sur le Web, vous devez être familier avec les langages et technologies de programmation associés, tels que JavaScript, HTML, CSS, WebRTC, etc. Dans le même temps, vous devez également maîtriser les technologies pertinentes de vision par ordinateur et d’intelligence artificielle. Il convient de noter qu'en raison de la conception du côté Web
Comment fermer le paiement sans mot de passe dans Kuaishou Tutoriel Kuaishou sur la façon de fermer le paiement sans mot de passe
Mar 23, 2024 pm 09:21 PM
Kuaishou est un excellent lecteur vidéo. La fonction de paiement sans mot de passe de Kuaishou est très familière à tout le monde. Elle peut nous être d'une grande aide dans la vie quotidienne, en particulier lors de l'achat des produits dont nous avons besoin sur la plateforme. . Maintenant, nous devons l'annuler. Comment pouvons-nous l'annuler efficacement ? La méthode d'annulation du paiement sans mot de passe est très simple. Les méthodes d'opération spécifiques ont été triées. ensemble. Jetons un coup d’œil à l’intégralité du guide sur ce site, j’espère qu’il pourra aider tout le monde. Tutoriel sur la façon de fermer le paiement sans mot de passe dans Kuaishou 1. Ouvrez l'application Kuaishou et cliquez sur les trois lignes horizontales dans le coin supérieur gauche. 2. Cliquez sur Boutique Kuaishou. 3. Dans la barre d'options ci-dessus, recherchez le paiement sans mot de passe et cliquez dessus. 4. Cliquez pour soutenir
Explication détaillée sur la façon de désactiver la protection en temps réel dans le Centre de sécurité Windows
Mar 27, 2024 pm 02:30 PM
En tant que l'un des systèmes d'exploitation comptant le plus grand nombre d'utilisateurs au monde, le système d'exploitation Windows a toujours été privilégié par les utilisateurs. Cependant, lorsqu'ils utilisent des systèmes Windows, les utilisateurs peuvent être confrontés à de nombreux risques de sécurité, tels que des attaques de virus, des logiciels malveillants et d'autres menaces. Afin de renforcer la sécurité du système, les systèmes Windows disposent de nombreux mécanismes de protection de sécurité intégrés, dont la fonction de protection en temps réel du Centre de sécurité Windows. Aujourd'hui, nous présenterons en détail comment désactiver la protection en temps réel dans le Centre de sécurité Windows. Tout d'abord, commençons
Comment puis-je activer le mode message privé lorsque l'autre partie dans le message privé TikTok a désactivé le mode message privé ? Puis-je voir si la personne à qui j'envoie un message privé a désactivé le mode message privé ?
Mar 28, 2024 am 08:01 AM
Douyin est une plate-forme sociale de courtes vidéos populaire qui permet aux utilisateurs d'enregistrer simplement leur vie et de partager leur bonheur. La fonction de messagerie privée joue un rôle important dans Douyin et constitue l'un des principaux moyens permettant aux utilisateurs d'interagir les uns avec les autres. Parfois, les utilisateurs peuvent rencontrer une situation dans laquelle l'autre partie a désactivé le mode de message privé, ce qui entraîne l'impossibilité d'envoyer des messages. 1. Comment puis-je activer le mode message privé si l'autre partie dans le message privé Douyin a désactivé le mode message privé ? 1. Confirmez si l'autre partie a activé les paramètres de confidentialité. Tout d'abord, nous devons confirmer si l'autre partie a activé les paramètres de confidentialité, ce qui peut avoir restreint la réception de messages privés. S'ils disposent de paramètres qui autorisent uniquement les messages privés de connaissances, nous pouvons essayer de les contacter par d'autres moyens, comme par le biais d'amis communs ou d'interactions sur les plateformes de réseaux sociaux. 2. Envoyez une demande d'ami. Si l'autre partie n'a pas activé les paramètres de confidentialité, nous
