Heim
Web-Frontend
js-Tutorial
Methode zum Implementieren eines Layer-Drag-Effekts, der in Js_javascript-Kenntnissen gezogen und vergrößert werden kann
Web-Frontend
js-Tutorial
Methode zum Implementieren eines Layer-Drag-Effekts, der in Js_javascript-Kenntnissen gezogen und vergrößert werden kann
Methode zum Implementieren eines Layer-Drag-Effekts, der in Js_javascript-Kenntnissen gezogen und vergrößert werden kann
js
方法
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:
Code kopieren Der Code lautet wie folgt:
*{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;
}