Shulou(Shulou.com)06/02 Report--

This article focuses on "how to use JavaScript to achieve slider verification code", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let the editor take you to learn "how to use JavaScript to achieve slider verification code"!

Effect: mouse press and hold down on the bottom slider to move the slider, the slider with a small background in the above image will also move, and the verification can be completed by moving to the missing area of the background. To achieve the above effect, you need to press the mouse (mousedown event), release the mouse (mouseup event) and move the mouse (mousemove event).

First make the html part to achieve the static effect. The size of the movable background of the large image is the same as that of the large image. Add a background-position attribute to the background of the small block to control the picture area to be displayed in the small image.

HTML:

Document * {margin: 0; padding: 0;} body {background: # 34495e;} .wrap {width: 600px; margin: 100px auto;} .banner {width: 600px; height: 400px Background: url (img/ChMkJ1bZOGOIE_lfABJWl176xQgAAMhjALAOLwAElav369.jpg); background-size: 600px 400px; position: relative;}. Blank-box {position: absolute; top: 100px; left: 200px; width: 50px; height: 50px; background: # fff } .block {position: absolute; top: 100px; left: 0; width: 50px; height: 50px; background: url (img/ChMkJ1bZOGOIE_lfABJWl176xQgAAMhjALAOLwAElav369.jpg); background-size:600px 400px; background-position:-200px-100px; border: 1px solid red Move {position: relative;} .move p {height: 50px; line-height: 50px; font-size: 16px; color: # 666; background: # eee; text-align: center;}. Move-block {position: absolute Left: 0; top: 0; width: 50px; height: 50px; background:#1abc9c; cursor: pointer;}

Move the slider >

JS section:

Get the desired dom element, which can only be moved when the mouse is pressed on the bottom slider, so bind a mouse down event on the slider, in this event, get the mouse coordinate point through the event object and subtract the offset of the small block to obtain the slider movement deviation value (the mouse coordinate point minus this deviation value is the real moving distance), the moving state becomes slidable.

Let banner=document.querySelector ('.banner'); let blankBox=document.querySelector ('. Blank-box'); let block=document.querySelector ('. Block'); let moveBlock=document.querySelector ('. Move-block'); whether let isDrop=false;// can slide let x magazine y / offset moveBlock.onmousedown=function (e) {var eigene | | window.event; x=e.clientX-block.offsetLeft; y=e.clientY-block.offsetTop; isDrop=true;}

When the sliding state is true, subtract the deviation from the coordinate points of the mouse and reposition the two movable sliders. If the slider slides to the missing area of the large image, the verification is successful.

MoveBlock.onmousemove=function (e) {if (isDrop) {var estrange | | window.event; let left= e.clientX Merx; if (Math.abs (left-200) > the distance from the missing area to the left in the big image block.style.left=left+'px'; moveBlock.style.left=left+'px'; / / 200)

Let banner=document.querySelector ('.banner'); let blankBox=document.querySelector ('. Blank-box'); let block=document.querySelector ('. Block'); let moveBlock=document.querySelector ('. Move-block'); whether the let isDrop=false;// can slide let x journal y and target leftpacing / offset, left positioning distance moveBlock.onmousedown=function (e) {var eigene | | window.event X=e.clientX-block.offsetLeft; y=e.clientY-block.offsetTop; isDrop=true;} moveBlock.onmousemove=function (e) {if (isDrop) {var eBay | | window.event; let left= e.clientXmurx; let maxX=banner.offsetWidth-block.offsetWidth / / if (leftmaxX) {left=maxX} block.style.left=left+'px'; moveBlock.style.left=left+'px'; / / the location of the missing area on the left side of the image (Math.abs (left-targetleft))

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.