Heute werde ich ein kleines Beispiel schreiben und mit js und css eine schwebende Box schreiben, die automatisch ausgeblendet werden kann. CSS wird definitiv zum Steuern von Stilen verwendet, und js wird zum Steuern des Anzeigens und Ausblendens verwendet. Das Anzeigen und Ausblenden wird normalerweise auf zwei Arten implementiert: 1. Verwenden Sie js, um die Anzeigeattribute zu steuern. 2. Verwenden Sie js, um die Größe zu steuern.
Worüber wir heute sprechen werden, ist das Anzeigen und Ausblenden von Elementen durch Steuern ihrer Größe. Das Prinzip lautet: Registrieren Sie das Ereignis, wenn sich die Maus aus dem Objektbereich herausbewegt 1. Wenn sich die Maus erneut in das Objekt bewegt, stellen Sie dessen Breite auf 1 ein. Die Breite wird wiederhergestellt. Es ist ganz einfach, werfen wir einen Blick darauf!
Verborgener Zustand:
Die schmale Linie auf der linken Seite ist der schwebende Rahmen, nachdem er ausgeblendet wurde.
Anzeigestatus:
Wenn die Maus über das schwebende Kästchen links gleitet, wird das schwebende Kästchen wieder angezeigt.
CSS-Stil:
Kopieren Sie den Codecode wie folgt:
<Stil>
* {font-size:12px;font-family:Verdana, 宋体;
html, body { margin:0px; padding:0px;
.b { margin:0px; padding:0px;
.line0 { Zeilenhöhe:20px; Hintergrundfarbe:hellgelb;
.line1 { line-height:18px;background-color:lightblue;padding:0px 10px;
.w { position:absolute; top:10px; width:300px;
.t { line-height:20px; width:hidden; background-color:white; border-bottom:1px Mitte; }
.winBody { height:270px; width:160px; overflow-y:auto; border-top:10px;
</style>
JS-Code:
Kopieren Sie den Codecode wie folgt:
<script type="text/javascript">
Funktion myshow(){
//document.getElementById('mydiv').style.display = "none";
document.getElementById('mydiv').style.width = "160px";
} //block
Funktion myhide(){
//document.getElementById('mydiv').style.display = "block";
document.getElementById('mydiv').style.width="1px";
}
//Zum Testen einige Inhalte nach dem Zufallsprinzip generieren, um Testeffekte zu erleichtern.
for(var i=0; i<400; i++)document.write("<div class=/"line"+(i%2)+"/">"+(new Array(20)).join(( Math.random()*1000000).toString(36)+" ")+"<//div>");
neue Funktion(w,b,c,d,o){
d=document;b=d.body;o=b.childNodes;c="className";
b.appendChild(w=d.createElement("div"))[c]= "b";
for(var i=0; i<o.length-1; i++)if(o[i][c]!="w")w.appendChild(o[i]),i--;
(window.onresize = function(){
w.style.width = d.documentElement.clientWidth + "px";
w.style.height = d.documentElement.clientHeight + "px";
})();
<span style="white-space:pre"> </span>}
</script>
HTML-Code:
Kopieren Sie den Codecode wie folgt:
<Körper>
<div id="mydiv" onmousemove="myshow()" onmouseout="myhide()">
<div>Studenteninformationen</div>
<div>
Studenten-ID: <label>0123456789 </label><br><br>
Name: <label>Xiao Ming</label><br><br>
Hochschule: <label>Software College</label><br><br>
Hauptfach: <label>Software Engineering</label><br><br>
Klasse: <label>Klasse 1</label><br><br>
</div>
</div>
</body>
Verwenden Sie ein schwebendes Feld, um einige Informationen anzuzeigen. Wenn Sie darauf zeigen, wird es angezeigt. Wenn Sie die Maus wegbewegen, wenn es nicht mehr benötigt wird, verschwindet es automatisch . Obwohl es sehr einfach ist, bietet es eine gute Benutzererfahrung. Es ist unser ständiges Streben, Dinge zu schaffen, die den Benutzern Komfort bieten.