Das Beispiel in diesem Artikel beschreibt die Implementierungsmethode des Ebenenzieheffekts, der in JS gezogen und vergrößert werden kann. Teilen Sie es als Referenz mit allen. Die spezifische Implementierungsmethode lautet wie folgt:
Js实现层拖动效果,还可以拖拽放大
*{margin:0;padding:0;}
#zhezhao{
Breite: 100 %;
Höhe: 100 %;
Hintergrund:#f00;
filter:alpha(opacity:0);
Deckkraft:0;
z-index:9999;
Position:absolut;
oben:0;
links:0;
display:none;
}
#div2{
Breite:200px;
Höhe:200px;
position:relativ;
Hintergrund:#EEEEEE;
border:1px solid #f00;
}
#div1{
Breite:15px;
Höhe:15px;
Hintergrund:#99CC00;
Position:absolut;
rechts:0px;
unten:0px;
Cursor:nw-resize;
Überlauf:versteckt;
Schriftgröße:12px;
text-align:center;
Zeilenhöhe:15px;
Farbe:#FFFFFF;
float:right;
z-index:3;
}
#richtig{
Breite:15px;
Höhe: 100 %;
Hintergrund:#f00;
float:right;
Position:absolut;
rechts:0;
oben:0;
Cursor:e-resize;
Überlauf:versteckt;
filter:alpha(opacity:0);
Deckkraft:0;
z-index:1;
}
#bottom{
Breite: 100 %;
Höhe:15px;
Hintergrund:#f00;
Position:absolut;
links:0;
unten:0;
Cursor:n-resize;
Überlauf:versteckt;
filter:alpha(opacity:0);
Deckkraft:0;
z-index:1;
}
#div2 p{
Polsterung:10px;
Zeilenhöhe:24px;
Schriftgröße:13px;
text-indent:24px;
Farbe:#996600;
}
#div2 h2{
Breite: 100 %;
Höhe:25px;
Zeilenhöhe:25px;
Schriftgröße:14px;
Hintergrund:#CC9900;
Farbe:#FFFFFF;
text-indent:15px;
Cursor:bewegen;
Überlauf:versteckt;
}
Perfekter Widerstand
Erleben Sie das gute Ziehen von JavaScript-Webseiten. Sie können es auch vergrößern oder verkleinern, um es zu vergrößern oder zu verkleinern. Halten Sie einfach die untere rechte Ecke der Ebene gedrückt, um hineinzuzoomen frei raus. Freunde, die es verwenden möchten, können die Js im Code in Klassen kapseln. Es ist sinnvoller, sie von außen einzuführen. '
ziehen
