js實現(xiàn)html滑動圖片拼圖驗證
更新時間：2020年06月24日 09:46:49 作者：Jeslie-He
這篇文章主要為大家詳細介紹了js實現(xiàn)html滑動圖片拼圖驗證，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)html滑動圖片拼圖驗證的具體代碼，供大家參考，具體內(nèi)容如下
html：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="./index.css" > <title>Document</title> </head> <body> <div class="container"> <canvas width="310" height="155" id="canvas"></canvas> <canvas width="310" height="155" id="block"></canvas> <div class="refreshIcon"></div> <div class="bar"> <div id="bar-mask"> <div class="verSliderBlock"></div> </div> <span id="slide">向右滑動驗證</span> </div> </div> <script src="./index.js"></script> </body>
css:
*{
margin: 0;
padding: 0;
}
body {
background-color: #E8E8E8;
}
.container{
position: relative;
}
#canva{
background: indianred;
}
#block{
position: absolute;
left: 0px;
}
.refreshIcon{
position: absolute;
left: 280px;
top: 5px;
width: 21px;
height: 20px;
cursor: pointer;
background: url(./refresh.png);
display: block;
}
.verSliderBlock{
height: 40px;
width: 40px;
background-color: #fff;
background:url('./right_arrow.png');
background-size:100%;
box-shadow: 0 0 3px rgba(0, 0, 0, .3);
cursor: pointer;
position: absolute;
text-align: center;
line-height: 40px;
color: #45494c;
font-size: 25px;
font-weight: 400;
}
.bar{
position: relative;
text-align: center;
width: 310px;
height: 40px;
line-height: 40px;
margin-top: 15px;
background: #f7f9fa;
color: #45494c;
border: 1px solid #e4e7eb;
display: block;
}
#bar-mask{
position: absolute;
left: 0;
top: 0;
height: 40px;
border: 0 solid #1991fa;
background: #d1e9fe;
}
js:
(function(window){
var canvas = document.getElementById('canvas');
var block = document.getElementById('block');
var canvas_ctx = canvas.getContext('2d')
var block_ctx = block.getContext('2d')
var img = document.createElement('img')
var refresh = document.querySelector('.refreshIcon')
var x = Math.round(Math.random() * 200) + 10,
y = Math.round(Math.random() * 100) + 10,
w = 42,
l = 42,
r = 10,
PI = Math.PI
console.log(x,y)
//獲取圖片后面的隨機號碼
function getRandomNumberByRange(start, end) {
return Math.round(Math.random() * (end - start) + start)
}
//初始化圖片
function initImg(){
img.onload = function () {
canvas_ctx.drawImage(img, 0, 0, 310, 155)
block_ctx.drawImage(img, 0, 0, 310, 155)
var blockWidth = w + r * 2
var _y = y - r * 2 + 2 // 滑塊實際的y坐標
var ImageData = block_ctx.getImageData(x, _y, blockWidth, blockWidth)
block.width = blockWidth
block_ctx.putImageData(ImageData, 0, _y)
};
img.crossOrigin = "Anonymous"
img.src = 'https://picsum.photos/300/150/?image=' + getRandomNumberByRange(0, 100)
}
//清除tupian
function clean(){
x = Math.round(Math.random() * 200) + 10,
y = Math.round(Math.random() * 100) + 10,
console.log(x,y)
canvas_ctx.clearRect(0, 0, 310, 155);
block_ctx.clearRect(0, 0, 310, 155)
block.width = 310
draw(canvas_ctx, 'fill')
draw(block_ctx, 'clip')
}
//繪制方塊
function draw(ctx, operation) {
ctx.beginPath()
ctx.moveTo(x, y)
ctx.arc(x + l / 2, y - r + 2, r, 0.72 * PI, 2.26 * PI)
ctx.lineTo(x + l, y)
ctx.arc(x + l + r - 2, y + l / 2, r, 1.21 * PI, 2.78 * PI)
ctx.lineTo(x + l, y + l)
ctx.lineTo(x, y + l)
ctx.arc(x + r - 2, y + l / 2, r + 0.4, 2.76 * PI, 1.24 * PI, true)
ctx.lineTo(x, y)
ctx.lineWidth = 2
ctx.fillStyle = 'rgba(255, 255, 255, 0.7)'
ctx.strokeStyle = 'rgba(255, 255, 255, 0.7)'
ctx.stroke()
ctx[operation]()
ctx.globalCompositeOperation = 'overlay'
}
initImg()
draw(canvas_ctx, 'fill')
draw(block_ctx, 'clip')
//添加移動事件
var block_slider = document.querySelector("#block");
var slider = document.querySelector(".verSliderBlock");
var slider_mark = document.querySelector("#bar-mask");
//用于判斷當(dāng)前是否是在按住滑塊的情況下
var yd = false
var moveX = 0
var downX = 0
//鼠標按下
slider.onmousedown = function (e) {
downX = e.clientX;
yd = true
}
//鼠標移動事件
function hadleMousemove(e) {
if (yd) {
moveX = e.clientX - downX;
document.querySelector('#slide').innerHTML = ''
if (moveX >= 310) {
moveX = 310 - 40
}
if (moveX > -2) {
slider.style.backgroundColor = "#1991FA";
slider_mark.style.borderWidth = "1px"
slider_mark.style.borderColor = "#1991fa"
slider_mark.style.width = moveX + 40 + "px";
block_slider.style.left = (310 - 40 - 20) / (310 - 40) * moveX + "px";
slider.style.left = moveX + "px";
}
}
}
//鼠標抬起事件
function hadleMouseup(e) {
if (yd) {
slider.onmousemove = null;
console.log(moveX)
block_slider.style.left = (310 - 40 - 20) / (310 - 40) * moveX + "px";
if (Math.abs((310 - 40 - 20) / (310 - 40) * moveX - x) < 10) {
slider.style.background = "url('./success.png')";
slider.style.backgroundSize = '100%'
// alert('驗證成功')
setTimeout(() => {
rest();
}, 1000)
} else {
slider_mark.style.backgroundColor = "#fce1e1"
slider_mark.style.borderWidth = "1px"
slider_mark.style.borderColor = "#f57a7a"
slider.style.backgroundColor = "#f57a7a";
slider.style.background = "url('./fail.png')";
slider.style.backgroundSize = '100%'
setTimeout(() => {
rest();
}, 1000)
}
yd = false
}
}
//鼠標在按住滑塊下移動
slider.onmousemove = function (e) {
hadleMousemove(e)
}
//鼠標在滑塊下抬起
slider.onmouseup = function (e) {
hadleMouseup(e)
}
//設(shè)置全局的移動事件,當(dāng)鼠標按下滑塊后,移動過程中鼠標可能會移出滑塊,這是滑塊也會監(jiān)聽鼠標的移動進行相應(yīng)的移動
document.addEventListener('mousemove', function (e) {
hadleMousemove(e)
})
document.addEventListener('mouseup', function (e) {
hadleMouseup(e)
})
function rest() {
clean()
document.querySelector('#slide').innerHTML = '向右滑動驗證'
slider.style.backgroundColor = "#fff";
slider.style.left = "0px"
slider.style.background = "url('./right_arrow.png')";
slider.style.backgroundSize = '100%'
block_slider.style.left = "0px"
slider_mark.style.width = "0px"
slider_mark.style.backgroundColor = "#d1e9fe"
slider_mark.style.borderWidth = "0px"
slider_mark.style.borderColor = "#d1e9fe"
initImg()
}
//刷新
refresh.onclick = function(){
rest()
}
}(window))
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了bootstrap可視化布局入門教程的相關(guān)資料，本文介紹的非常詳細，具有參考借鑒價值，感興趣的朋友一起看看吧2016-09-09
js中小數(shù)轉(zhuǎn)換整數(shù)的方法有很多，有下退、上進、四舍五入等等，需要的朋友可以了解下本文2014-01-01
數(shù)組是Javascript最常見的概念之一，它為我們提供了處理數(shù)據(jù)的許多可能性，熟悉數(shù)組的一些常用操作是很有必要的。本文將為大家介紹12個有用的JavaScript數(shù)組技巧，需要的朋友可以參考一下2021-12-12
在本篇文章里小編給大家整理的是關(guān)于JS用最簡單的方法實現(xiàn)四舍五入的實例內(nèi)容，需要的朋友們學(xué)習(xí)下。2019-08-08
javascript刪除元素節(jié)點removeChild()用法實例
這篇文章主要介紹了javascript刪除元素節(jié)點removeChild()用法,實例分析了removeChild()方法移除節(jié)點的使用技巧,需要的朋友可以參考下2015-05-05
JavaScript+html5 canvas制作的圓中圓效果實例
這篇文章主要介紹了JavaScript+html5 canvas制作的圓中圓效果,結(jié)合完整實例形式分析了基于JavaScript與html5 canvas技術(shù)實現(xiàn)的圖形繪制與顏色隨機填充技巧,需要的朋友可以參考下2016-01-01
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)九宮格拖拽效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
下面小編就為大家?guī)硪黄獪\談regExp的test方法取得的值變化的原因及處理方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
Android 自定義view仿微信相機單擊拍照長按錄視頻按鈕
這篇文章主要介紹了Android 自定義view仿微信相機單擊拍照長按錄視頻按鈕，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-07-07
JavaScript來實現(xiàn)打開鏈接頁面的簡單實例
下面小編就為大家?guī)硪黄狫avaScript來實現(xiàn)打開鏈接頁面的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06