Я видел письменный тестовый вопрос для собеседования со старшим фронтенд-менеджером на сайте Renren.com.
Требуется рукописный код, и один из вопросов — сделать отображение картинки
Похож на панель отображения с маленькими миниатюрами внизу изображений Baidu.
Кроме того, необходимо прокручивать колесо мыши, чтобы увеличивать и уменьшать его.
Я правда не знаю, как это сделать, поэтому поискал информацию в Интернете.
Найдено событие, которое может захватить onmousewheel
Затем определите, следует ли выполнять накат вперед или назад, на основе положительного или отрицательного значения event.wheelDelta.
Я случайно написал небольшой пример и зафиксировал клавиши клавиатуры. Он не очень красивый и нет переноса строки.
Поскольку он создан с помощью textNode, HTML-код добавить невозможно.
Кстати говоря, можно ли использовать этот метод для предотвращения внедрения xss?
Скопируйте код кода следующим образом:
<body onkeydown="showKey()" onmousewheel="showKey()">
Скопируйте код кода следующим образом:
функция showKey(){
если (event.wheelDelta) {
Скопируйте код кода следующим образом:
// Положительное значение 120 означает перекат вперед, отрицательное 120 означает перекат назад
var textNode = document.createTextNode(event.wheelDelta+" ");
document.body.appendChild(textNode);
документ.тело.нормализовать();
}
если (event.keyCode)
{
var textNode = document.createTextNode(event.keyCode+" ");
document.body.appendChild(textNode);
документ.тело.нормализовать();
}
}
Среди них я только что использовал один из элементов textNode в расширенном дизайне, который я только что рассмотрел сегодня.
Методы объединения нескольких текстовых узлов
Скопируйте код кода следующим образом:
нормализовать();