I saw a written test question for a senior front-end interview at Renren.com
Handwritten code is required, and one of the questions is to make a picture display
Similar to the display bar with small thumbnails at the bottom of Baidu pictures
Then there is a requirement to have a mouse wheel scroll to make it larger and smaller.
I really don’t know how to do this, so I looked for information online.
Found an event that can capture onmousewheel
Then determine whether to roll forward or backward based on the positive or negative value of event.wheelDelta.
I wrote a small example casually and captured the keyboard keys. It is not very beautiful and there is no line break.
Because it is made with textNode, the html code cannot be added.
Speaking of which, can this method be used to prevent xss injection?
Copy the code code as follows:
<body onkeydown="showKey()" onmousewheel="showKey()">
Copy the code code as follows:
function showKey(){
if(event.wheelDelta){
Copy the code code as follows:
// Positive 120 means forward roll, negative 120 means backward roll
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();
}
}
Among them, I just used one of the textNode elements in the advanced design I just looked at today.
Methods to merge multiple textNodes
Copy the code code as follows:
normalize();