Heim >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
- WBOYOriginal
- 2016-05-16 16:13:17993Durchsuche
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;
}