JavaScript to implement slider verification code
|
This article shares the specific code of JavaScript to implement the slider verification code for your reference. The specific content is as follows Effect: Press and hold the mouse on the bottom slider and drag it to move the slider. The slider with the small image background in the large image above will also move with it. The verification is completed when it is moved to the area where the large image background is missing. To achieve the above effects, the mouse is pressed (mousedown event), the mouse is released (mouseup event), and the mouse moves (mousemove event) are required. First, create the HTML part to achieve the static effect. The size of the movable small background block in the large image is the same as the large image. Add the background-position attribute to the background of the small image block to control the image area to be displayed in the small image.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
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;
}
</style>
</head>
<body>
<div class="wrap">
<div class="banner">
<div class="blank-box"></div>
<div class="block"></div>
</div>
<div class="move">
<p>Move the slider>>></p>
<div class="move-block"></div>
</div>
</div>
</body>
</html>JS part: Get the required DOM element. The mouse can only move when it is pressed on the bottom slider, so bind a mouse press event to this slider. In this event, get the mouse coordinate point through the event object and subtract the offset of the small block to get the deviation value of the slider movement (the mouse coordinate point minus the deviation value is the actual moving distance), and 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');
let isDrop=false;//Is it slidable? let x,y;//Offset moveBlock.onmousedown=function(e){
var e=e||window.event;
x=e.clientX - block.offsetLeft;
y=e.clientY - block.offsetTop;
isDrop=true;
}When the sliding state is true, the deviation value is subtracted from the mouse coordinates and the two movable sliders are repositioned. Slide the slider to the missing area of the large image to indicate successful verification.
moveBlock.onmousemove=function(e){
if(isDrop){
var e=e||window.event;
let left = e.clientX-x;
block.style.left=left+'px';
moveBlock.style.left=left+'px';
//The position of the missing area in the 200-pixel image from the left if (Math.abs(left-200)<=3){
alert('Verification successful');
}
}
}At this point, the effect has been initially achieved, but the slider will exceed the range of the large image. It is necessary to add a limit to the sliding distance of the slider, otherwise it will exceed the range of the large image.
moveBlock.onmousemove=function(e){
if(isDrop){
var e=e||window.event;
let left = e.clientX-x;
let maxX=banner.offsetWidth-block.offsetWidth;
//Range limit if (left < 0) {
left=0
}
if(left>maxX){
left=maxX
}
block.style.left=left+'px';
moveBlock.style.left=left+'px';
//The position of the missing area in the 200-pixel image from the left if (Math.abs(left-200)<=3){
alert('Verification successful');
}
}
}When the mouse is released, the movable state changes to false. To prevent moving too fast, bind the event to the document.
document.onmouseup=function(){
isDrop=false;
}The effect has been achieved here. If you want the missing area of the background image to be random, you can add a random positioning function.
//Random positioning function randomPosition(){
/*Random number formula takes random numbers between nmMath.random() * (mn)+n*/
let ranX=Math.round(Math.random()* (banner.offsetWidth-100)+100);
let ranY=Math.round(Math.random() * (banner.offsetHeight-0)+0);
blankBox.style.left=ranX+'px';
blankBox.style.top=ranY+'px';
block.style.top=ranY+'px';
block.style.backgroundPosition=-ranX+'px '+-ranY+'px'
}Full code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
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;
}
</style>
</head>
<body>
<div class="wrap">
<div class="banner">
<div class="blank-box"></div>
<div class="block"></div>
</div>
<div class="move">
<p>Move the slider>>></p>
<div class="move-block"></div>
</div>
</div>
<script>
let banner = document.querySelector('.banner');
let blankBox = document.querySelector('.blank-box');
let block = document.querySelector('.block');
let moveBlock = document.querySelector('.move-block');
let isDrop=false; //Is it slidable? let x,y,targetleft; //Offset, left positioning distance moveBlock.onmousedown=function(e){
var e=e||window.event;
x=e.clientX - block.offsetLeft;
y=e.clientY - block.offsetTop;
isDrop=true;
}
moveBlock.onmousemove=function(e){
if(isDrop){
var e=e||window.event;
let left = e.clientX-x;
let maxX=banner.offsetWidth-block.offsetWidth;
//Range limit if (left < 0) {
left=0
}
if(left>maxX){
left=maxX
}
block.style.left=left+'px';
moveBlock.style.left=left+'px';
//The position of the missing area from the left in the 200-pixel image if (Math.abs (left-targetleft) <= 5) {
alert('Verification successful');
}
}
}
document.onmouseup=function(){
isDrop=false;
}
//Random positioning function randomPosition(){
/*Random number formula takes random numbers between nmMath.random() * (mn)+n*/
let ranX=Math.round(Math.random()* (banner.offsetWidth-100)+100);
let ranY=Math.round(Math.random() * (banner.offsetHeight-0)+0);
targetleft=ranX;
blankBox.style.left=ranX+'px';
blankBox.style.top=ranY+'px';
block.style.top=ranY+'px';
block.style.backgroundPosition=-ranX+'px '+-ranY+'px'
}
randomPosition()
</script>
</body>
</html>The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: How to use Zen coding in Dreamweaver
>>: Faint: "Use web2.0 to create standard-compliant pages"
Recommend
Summary of MySQL log related knowledge
Table of contents SQL execution order bin log Wha...
Vendor Prefix: Why do we need a browser engine prefix?
What is the Vendor Prefix? Vendor prefix—Browser ...
Summary of various ways to create objects in js and their advantages and disadvantages
Table of contents Early creation method Factory P...
Introduction and examples of hidden fields in HTML
Basic syntax: <input type="hidden" na...
Analysis of the project process in idea packaging and uploading to cloud service
one. First of all, you have to package it in idea...
Detailed explanation of using new methods of html5 to manipulate element class names in JavaScript
Table of contents 1. classList attribute 2. Pract...
How to use Docker buildx to build multi-platform images and push them to private repositories
Introduction Recently I found that there is an AR...
Some improvements in MySQL 8.0.24 Release Note
Table of contents 1. Connection Management 2. Imp...
MySQL calculates the number of days, months, and years between two dates
The MySQL built-in date function TIMESTAMPDIFF ca...
Vite+Electron to quickly build VUE3 desktop applications
Table of contents 1. Introduction 2. Create a Vit...
Teach you how to implement a react from html
What is React React is a simple javascript UI lib...
The pitfalls of deploying Angular projects in Nginx
Searching online for methods to deploy Angular pr...
A brief analysis of the principles of NFS servers and the steps for building, configuring and deploying them
Table of contents Introduction to NFS Service Wha...
Application of mapState idea in vuex
Table of contents 1. Map method 2. Application ba...
JavaScript to achieve product query function
This article example shares the specific code of ...