js滑动拼图验证,拖动滑块完成拼图验证 没有图片
这篇文章主要为大家详细介绍了某视频剪辑软件元素实现拖住滑块拼图验证，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
某视频剪辑软件拖住滑块拼图验证，以下是卡维斯直接写的滑块拼图验证码，直接复制引用即可
模板
div id= puzzle ref= puzzle style= display:inline-block；
！-:style= padding: 16 * scale px 16 * scale px 28 * scale px；边框半径："16 *刻度"像素； -
div class=拼图容器
div :style= 位置：相对；溢出：隐藏；宽度：“数据宽度”px；
div :style= 位置：相对；宽度：“数据宽度”px；高度：“数据高度”px；
图片
id=尖叫
ref=尖叫
:src=imgRandom
:style= width:数据宽度 px；高度：“数据高度”px；
/
canvas id= puzzle-box ref= puzzle box :width=数据宽度:height=数据高度/canvas
/div
差异
字谜失物招领箱
:style= left: left _ Num px；宽度：“数据宽度”px；高度：“数据高度”px；
画布id= puzzle-shadow ref= puzzle shadow :width=数据宽度:height=数据高度/canvas
画布id= puzzle-lost ref= puzzle lost :width=数据宽度:height=数据高度/canvas
/div
p
提示
ref=verTips
:style= height: 22 * scale px；行高："22 *刻度"像素；下：“(显示提示==真？0:-22 *刻度) px；font-size: 12 * scale px；
模板v-if=验证
span:style= color:# 42ca6b；行高："22 *刻度"像素；验证通过/span
span:style= margin-left: 4 * scale px；行高："22 *刻度"像素；哇喔，怪物吃了拼图，快去登录吧~/span
/模板
模板v-if=！验证
span:style= color:red；行高："22 *刻度"像素；验证失败：/span
span:style= margin-left: 4 * scale px；行高："22 *刻度"像素；拖动滑块将悬浮图像正确拼合/span
/模板
/p
/div
差异
“重建”
@click=refreshImg
:style= height: 28 * scale px；填充：“1 *刻度”px“16 *刻度”px；font-size: 18 * scale px；
a-icon type=重做/
/div
/div
br /
div class= slider-container :style= width:数据宽度 px；
div class= slider-bar :style= border-radius: 24 * scale px；
p
class=滚动条-文本选择-无
onselectstart=return false
:style= line-height: 28 * scale px；font-size: 12 * scale px；
按住滑块，拖动完成上方拼图/p
/div
差异
class=slider-btn
ref=sliderBtn
@mousedown=startMove
@touchstart=startMove
:style= top:-7 * scale px；
图标
type=pause-circle
theme=twoTone
twoToneColor=#52c41a
:style= font-size: 44 * scale px；
/
跨越class=slider-center-zzz/span
/div
/div
/div
/模板
脚本语言=js
导出默认值{
名称："拼图",
data () {
返回{
移动开始： ,
显示提示：错误，
验证：假的，
randomX:空，
空的，
imgRandom: ，
左数：0,
数据宽度：404,
数据高度：90,
拼图尺寸：100,
偏差：11,
比例尺：1,
重定时器：空，
isleavePage: false
}
},
道具：{
宽度：{
类型：[字符串，数字],
默认值：340
},
高度：{
类型：[字符串，数字],
默认值：120
},
cropImage: {
类型：[布尔],
默认值：错误
},
困惑列表：{
类型：数组，
默认：()=[
./././static/img/a.png ，
]
},
PlSize: {
类型：[字符串，数字],
默认值：48
},
偏差：{
类型：[字符串，数字],
默认值：4
},
填充：{
类型：[数字],
默认值：20
},
成功：{
类型：功能，
默认值：()={
警报(验证成功)
}
},
一个错误：{
类型：功能，
默认值：()={
警报(验证失败)
}
}
},
方法：{
/* 刷新*/
随机编号(最小值，最大值){
假设范围=最大-最小一
设Rand=Math.random()
返回最小数学下限(兰特*范围)
},
刷新(){
让imgRandomNum=这个RandomNum(0，this.puzzleImgList.length-1)
这个。imgrandom=这个。puzzleimglist
this.initCanvas()
},
/* 画布初始化*/
initCanvas () {
this.clearCanvas()
//让自我=这个
设w=this.dataWidth
设h=this.dataHeight
//让PL_Size=48
//2019-02-12开始PL_Size使用可传递参数
让PL_Size=this.puzzleSize
让填充=20
设MinN_X=填充PL_Size
设MaxN_X=w -填充- PL_Size - PL_Size/6
让MaxN_Y=填充
设MinN _ Y=h-padding-PL _ Size-PL _ Size/6
this.randomX=this .随机编号(最小x，最大x)
这. randomY=这.随机编号(最小，最大)
设X=this.randomX
让Y=this.randomY
this.left_Num=-X 10
设d=PL_Size/3
让c=这个refs.puzzleBox
设c_l=这个refs.puzzleLost
让c_s=这个refs.puzzleShadow
让ctx=c.getContext(2d )
设ctx_l=c_l.getContext(2d )
设ctx_s=c_s.getContext(2d )
CTX。globalcompositeoperation= xor
ctx.shadowBlur=10
ctx.shadowColor=#fff
ctx.shadowOffsetX=3
ctx.shadowOffsetY=3
ctx.fillStyle=rgba(0，0，0，0.7)
ctx.beginPath()
ctx.lineWidth=1
ctx.strokeStyle=rgba(0，0，0，0)
ctx.moveTo(X，Y)
ctx.lineTo(X d，Y)
ctx.bezierCurveTo(X d，Y - d，X ^ 2 * d，Y - d，X ^ 2 * d，y)
CTX。直线到(X ^ 3 * d，y)
CTX。线到(X ^ 3 * d，Y ^ d)
ctx.bezierCurveTo(X 2 * d，Y d，X 2 * d，Y 2 * d，X 3 * d，Y 2 * d)
CTX。线到(X ^三维，Y ^三维)
ctx.lineTo(X，Y ^三维)
ctx.closePath()
ctx.stroke()
ctx.fill()
让img=新图像()
img.src=this.imgRandom
img.onload=function () {
ctx_l.beginPath()
ctx_l.strokeStyle=rgba(0，0，0，0)
ctx_l.moveTo(X，Y)
ctx_l.lineTo(X d，Y)
ctx_l.bezierCurveTo(X d，Y - d，X ^ 2 * d，Y - d，X ^ 2 * d，y)
CTX _ l . line to(X ^ 3 * d，y)
CTX _ l . line to(X ^ 3 * d，Y ^ d)
ctx_l.bezierCurveTo(X 2 * d，Y d，X 2 * d，Y 2 * d，X 3 * d，Y 2 * d)
CTX _ l . line to(x ^ 3d，y ^ 3d)
ctx_l.lineTo(X，Y ^ 3 * d)
ctx_l.closePath()
ctx_l.stroke()
ctx_l.shadowBlur=10
ctx_l.shadowColor=black
ctx_l.clip()
ctx_l.drawImage(img，0，0，w，h)
}
ctx_s.beginPath()
ctx_s.lineWidth=1
ctx_s.strokeStyle=rgba(0，0，0，0)
ctx_s.moveTo(X，Y)
ctx_s.lineTo(X d，Y)
ctx_s.bezierCurveTo(X d，Y - d，X ^ 2 * d，Y - d，X ^ 2 * d，y)
CTX _ s . line to(X ^ 3 * d，y)
CTX _ s . line to(x ^ 3d，Y ^ d)
ctx_s.bezierCurveTo(X 2 * d，Y d，X 2 * d，Y 2 * d，X 3 * d，Y 2 * d)
CTX _ s . line to(x ^ 3d，y ^ 3d)
ctx_s.lineTo(X，y ^ 3d)
ctx_s.closePath()
ctx_s.stroke()
ctx_s.shadowBlur=20
ctx_s.shadowColor=black
ctx_s.fill()
},
/* 通过重置画布尺寸清空画布，这种方式更彻底*/
clearCanvas () {
让c=这个refs.puzzleBox
设c_l=这个refs.puzzleLost
让c_s=这个refs.puzzleShadow
c.setAttribute(height ，c.getAttribute(height ))
c_l.setAttribute(height ，c.getAttribute(height ))
c_s.setAttribute(height ，c.getAttribute(height ))
//c.height=c.height
//c_l.height=c_l.height
//c_s.height=c_s.height
},
/* 按住滑块后初始化移动监听，记录初始位置*/
startMove (e) {
console.log(e)
e=e window.event
这个参考文献。滑块BTN。风格。背景位置= 0-216像素
这个。移动开始=e . pagex e .目标触摸[0].pageX
this.addMouseMoveListener()
},
/* 滑块移动*/
移动(e) {
让自我=这个
e=e window.event
让moveX=e . pagex e . target touches[0].pageX
设d=moveX - self.moveStart
设w=self.dataWidth
让PL_Size=this.puzzleSize
让填充=20
if (self.moveStart===) {
返回""
}
if (d 0 d (w - padding - PL_Size)) {
返回""
}
自我参考文献。滑块BTN。风格。左=d px
自我参考文献。滑块BTN。风格。过渡=继承
自我参考文献。拼图丢失。风格。左=d px
自我参考文献。拼图丢失。风格。过渡=继承
自我参考文献。拼图阴影。风格。左=d px
自我参考文献。拼图阴影。风格。过渡=继承
},
/* 移动结束，验证并回调*/
moveEnd (e) {
让自我=这个
e=e window.event
let moveEnd _ X=(e . pagex e . changed touches[0].pageX) - self.moveStart
设ver_Num=self.randomX - 10
让偏差=这个。偏差
设最小左=垂直偏差
设最大左偏差=垂直偏差
if (self.moveStart！==) {
if(Max _ left moveEnd _ X moveEnd _ X Min _ left){
self.displayTips=true
自我验证=真
setTimeout(function () {
if(self.isleavePage){
返回
}
self.displayTips=false
self.initCanvas()
}, 2000)
/* 成功的回调函数*/
自我。在成功()
}否则{
self.displayTips=true
自我验证=假
setTimeout(function () {
if(self.isleavePage){
返回
}
self.displayTips=false
}, 2000)
/* 失败的回调函数*/
self.onError()
}
}
如果(自身类型.$refs.sliderBtn)！==未定义类型的(自己的).$refs.puzzleLost)！==未定义类型的(自己的).$refs.puzzleShadow)！==未定义){
自我。retimer=setTimeout(function(){
if(self.isleavePage){
返回
}
自我. refs.sliderBtn.style.left=0
自我参考文献。滑块BTN。风格。过渡=左0.5s
自我. refs.puzzleLost.style.left=0
自我参考文献。拼图丢失。风格。过渡=左0.5s
自我参考文献。拼图阴影。风格。左=0
自我参考文献。拼图阴影。风格。过渡=左0.5s
}, 1000)
自我参考文献。滑块BTN。风格。背景位置= 0-84px
}
self.moveStart=
},
/* 绑定滑块移动与滑动结束，移动过程中鼠标可在绑定的区域*/
addMouseMoveListener () {
让自我=这个
文档。addevent侦听器(“mousemove”，self.moving)
文档。addevent侦听器(“触摸移动”，自动移动)
文档。addevent侦听器( mouseup ，self.moveEnd)
文档。addevent侦听器(“touch end”，self.moveEnd)
}
},
已安装(){
让自我=这个
this.dataWidth=this .$refs.puzzle.clientWidth*0.884
这个。数据高度=这个。数据宽度*(这个。身高/这个。宽度)
this.scale=这个refs.puzzle.clientWidth/260
这个。puzzlesize=this。数据宽度*(this .PlSize/this.width)
setTimeout(self.refreshImg，0)
},
已创建(){
让imgRandomNum=这个RandomNum(0，this.puzzleImgList.length - 1)
这个。imgrandom=这个。puzzleimglist
this.puzzleSize=Number(this .PlSize)
this.deviation=Number(this .偏差)
//this.dataWidth=this.width
//this.dataHeight=this.height
//这个。比例尺=this.width/260
},
观察：{
},
销毁前(){
this.isleavePage=true
}
}
/脚本
样式范围。滑块-btn {
位置：绝对；
宽度：90px
高度：67px
左：0;
top:-7px；
z指数：12;
光标：指针；
背景-位置：0-84px；
过渡：继承；
背景色：# F4F7菲；
边界半径：45%;
显示器：flex
}。滑块-中心-zzz
文本对齐：居中；
行高：67px
位置：绝对；
颜色：# 53C300
高度：40px
宽度：100%;
}。版本提示{
位置：绝对；
左：0;
底部：-22px；
背景：rgba(255，255，255，0.9)；
高度：22px
行高：22px
字体大小：12px
宽度：100%;
边距：0;
文本对齐：左对齐；
填充：0 8px
过渡：全0.4s
}。滑块提示{
底部：0;
}。版本提示我{
显示：内嵌-块；
宽度：22px
高度：22px
垂直对齐：顶部；
背景-位置：-4px-1229 px；
}。版本提示跨度{
显示：内嵌-块；
垂直对齐：顶部；
行高：22px
颜色：# 455;
}。活动提示{
显示：块；
}。隐藏{
显示：无；
}。重新btn {
位置：绝对；
左：0;
底部：0;
高度：28px
填充：0 16px
}。重新招标一个{
显示：内嵌-块；
宽度：14px
高度：14px
边距：0px 0；
背景-位置：0-1179 px；
光标：指针；
}。回复：悬停{
背景-位置：0-1193 px；
}。拼图容器{
位置：相对；
/*填充：16像素16像素28像素*/
/*边框：1px solid # ddd*/
背景：# E0 E1 E3；
/*边框-半径：16px*/
/*身高：83px*/
/*宽度：340像素*/
}。滑块容器{
位置：相对；
边距：自动；
}。滑动条{
边框：1px纯色# c3c3c3
边框-半径：24px
背景：# E0 E1 E3；
方框阴影：0 1px 1px rgba(12，10，10，0.2)插图；
}。滑动条-文本{
字体大小：12px
颜色：# 486c80
行高：28px
边距：0;
文本对齐：右对齐；
填充-右侧：22px
}
#拼图盒{
位置：绝对；
左：0;
top:0；
z指数：22;
}
#谜题-阴影{
位置：绝对；
左：0;
top:0；
z指数：22;
}
#迷题-丢失{
位置：绝对；
左：0;
top:0；
z指数：33;
}。字谜丢失箱{
位置：绝对；
宽度：260像素
高度：116像素
左：0;
top:0；
z指数：111;
}
/风格
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。