Exemple complet de fenêtre flottante pouvant être zoomée, glissée, fermée et réduite avec les compétences JS

Exemple complet de fenêtre flottante pouvant être zoomée, glissée, fermée et réduite avec les compétences JS_javascript

WBOY

Libérer： 2016-05-16 16:11:09

original

1681 Les gens l'ont consulté

L'exemple de cet article décrit la méthode JS d'implémentation d'une fenêtre flottante qui peut être zoomée, déplacée, fermée et réduite. Partagez-le avec tout le monde pour votre référence. La méthode de mise en œuvre spécifique est la suivante :

Copier le code Le code est le suivant :

var Window=document.createElement("div");
Window.id="nom divWindow";
Window.className="divWindow";
Window.style.left=gauche 'px';
Window.style.top=haut 'px';
Window.style.width=largeur 'px';
Window.style.height=hauteur 'px';
Window.onclick=fonction(){
if(parseInt(Window.style.zIndex)<=zindex){
zindex ;
Window.style.zIndex=zindex;
>
>
this.Window=Fenêtre;
//Les attributs publics peuvent être exploités en dehors de la classe ; si vous souhaitez opérer en dehors de la classe, vous pouvez changer l'élément en attribut public

var Bar=document.createElement("div");
Bar.id="divBar" nom;
Bar.onselectstart="return false";
Bar.className="divBar";
Bar.onmousedown=this.mousedown;
Bar.ondblclick=this.dblclick;
Bar.onmousemove=this.mousemove;
Bar.onmouseup=this.mouseup;
Window.appendChild(Bar);
var Title=document.createElement("span");
Title.id="divTitle" nom ;
Title.className="divTitle";
Title.style.width=(width-40) 'px'; //Longueur du titre adaptative
Titre.innerText=titre;
Bar.appendChild(Titre);
var Change=document.createElement("span");
Change.id="divChange" nom;
Change.className="divChange";
Change.innerText="－";
Change.ondblclick=this.changeWindow;
Change.onclick=this.changeWindow;
Bar.appendChild(Changement);
var Close=document.createElement("span");
Close.id="divClose" nom;
Fermer.onclick=function(){
Window.style.display='none';
>
Fermer.className="divClose";
Fermer.innerText="×";
Bar.appendChild(Fermer);
var Content=document.createElement("div");
Content.id="divContent" nom;
Content.className="divContent"
Content.innerHTML=content;
Content.style.height=parseInt(height-20) 'px';
Window.appendChild(Contenu);

var ReSize=document.createElement("div");
ReSize.className="divReSize";
ReSize.onmousedown=function(){
if(Window.style.zIndex<=zindex){
zindex ;
Window.style.zIndex=zindex;
>
ReSize.setCapture();
isMouseDown=true;
>
ReSize.onmousemove=function(){
if (isMouseDown && !maximum)
{
width=parseInt(event.clientX)-parseInt(Window.style.left) 5;
height=parseInt(event.clientY)-parseInt(Window.style.top) 5;
If(width>100){ //Définir la largeur minimale
Window.style.width=largeur 'px';
Title.style.width=(width-40) 'px';
>
If(height>100){ //Définir la hauteur minimale
Window.style.height=hauteur 'px';
Content.style.height=parseInt(height-20) 'px';
>
>
>
ReSize.onmouseup=function(){
ReSize.releaseCapture();
isMouseDown=false;
>
Window.appendChild(ReSize);
var Iframe=document.createElement("iframe"); //Ajouter une iframe, bloquer le contrôle

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