Ich habe eine schriftliche Testfrage für ein leitendes Front-End-Interview bei Renren.com gesehen
Es ist handgeschriebener Code erforderlich, und eine der Fragen besteht darin, eine Bildanzeige zu erstellen
Ähnlich der Anzeigeleiste mit kleinen Miniaturansichten am unteren Rand von Baidu-Bildern
Dann ist ein Scrollen mit dem Mausrad erforderlich, um es größer und kleiner zu machen.
Ich weiß wirklich nicht, wie ich das machen soll, also habe ich online nach Informationen gesucht.
Es wurde ein Ereignis gefunden, das mit dem Mausrad erfasst werden kann
Bestimmen Sie dann basierend auf dem positiven oder negativen Wert von event.wheelDelta, ob vorwärts oder rückwärts gerollt werden soll.
Ich habe beiläufig ein kleines Beispiel geschrieben und die Tastaturtasten erfasst. Es ist nicht sehr schön und es gibt keinen Zeilenumbruch.
Da es mit textNode erstellt wurde, kann der HTML-Code nicht hinzugefügt werden.
Apropos: Kann diese Methode verwendet werden, um die XSS-Injektion zu verhindern?
Kopieren Sie den Codecode wie folgt:
<body onkeydown="showKey()" onmousewheel="showKey()">
Kopieren Sie den Codecode wie folgt:
Funktion showKey(){
if(event.wheelDelta){
Kopieren Sie den Codecode wie folgt:
// Positive 120 bedeutet Vorwärtsrolle, negative 120 bedeutet Rückwärtsrolle
var textNode = document.createTextNode(event.wheelDelta+" ");
document.body.appendChild(textNode);
document.body.normalize();
}
if(event.keyCode)
{
var textNode = document.createTextNode(event.keyCode+" ");
document.body.appendChild(textNode);
document.body.normalize();
}
}
Darunter habe ich gerade eines der textNode-Elemente im erweiterten Design verwendet, das ich mir heute gerade angesehen habe.
Methoden zum Zusammenführen mehrerer TextNodes
Kopieren Sie den Codecode wie folgt:
normalisieren();