滑块验证PC端，手机端需稍作改动

;

(function($) {

$.fn.SliderImgPuzzle = function(setting) {

var defaults = {

callback: false

}

var setting = $.extend(defaults, setting);

const l = 42,

r = 10,

w = 300,

h = 155,

PI = Math.PI

const L = l + r * 2

function getRandomNumberByRange(start, end) {

return Math.round(Math.random() * (end - start) + start)

}

function createCanvas(width, height) {

const canvas = createElement('canvas')

canvas.width = width

canvas.height = height

return canvas

}

function createImg(onload) {

const img = createElement('img')

img.crossOrigin = "Anonymous"

img.onload = onload

img.onerror = () => {

img.src = getRandomImg()

}

img.src = getRandomImg()

return img

}

function createElement(tagName) {

return document.createElement(tagName)

}

function addClass(tag, className) {

tag.classList.add(className)

}

function removeClass(tag, className) {

tag.classList.remove(className)

}

function getRandomImg() {

return './images/random/' + getRandomNumberByRange(1,8) + '.jpg'

}

function draw(ctx, operation, x, y, type) {

if (type == 1)

draw1(ctx, operation, x, y);

else if (type == 2)

draw2(ctx, operation, x, y);

else if (type == 3)

draw3(ctx, operation, x, y);

else if (type == 4)

draw4(ctx, operation, x, y);

else if (type == 5)

draw5(ctx, operation, x, y);

else if (type == 6)

draw6(ctx, operation, x, y);

}

//六种不同的滑块位置

function draw6(ctx, operation, x, y) {

ctx.beginPath()

ctx.moveTo(x, y)

ctx.lineTo(x + l, y)

ctx.lineTo(x + l, y + l / 2)

ctx.arc(x + l + r - 4, y + l / 2, r, 0, 2 * PI)

ctx.lineTo(x + l, y + l / 2)

ctx.lineTo(x + l, y + l)

ctx.lineTo(x + l / 2, y + l)

ctx.arc(x + l / 2, y + l + 4, r, 0, 2 * PI)

ctx.lineTo(x + l / 2, y + l)

ctx.lineTo(x, y + l)

ctx.lineTo(x, y)

ctx.fillStyle = '#fff'

ctx[operation]()

ctx.beginPath()

ctx.arc(x + l / 2, y, r, 2 * PI, 1 * PI)

ctx.globalCompositeOperation = "xor"

ctx.fill()

}

function draw5(ctx, operation, x, y) {

ctx.beginPath()

ctx.moveTo(x, y)

ctx.lineTo(x + l / 2, y)

ctx.arc(x + l / 2, y - r + 4, r, 0, 2 * PI)

ctx.lineTo(x + l / 2, y)

ctx.lineTo(x + l, y)

ctx.lineTo(x + l, y + l / 2)

ctx.arc(x + l + r - 4, y + l / 2, r, 0, 2 * PI)

ctx.lineTo(x + l, y + l / 2)

ctx.lineTo(x + l, y + l)

ctx.lineTo(x, y + l)

ctx.lineTo(x, y)

ctx.fillStyle = '#fff'

ctx[operation]()

ctx.beginPath()

ctx.arc(x + l / 2, y + l, r, 1 * PI, 2 * PI)

ctx.globalCompositeOperation = "xor"

ctx.fill()

}

function draw4(ctx, operation, x, y) {

ctx.beginPath()

ctx.moveTo(x, y)

ctx.lineTo(x + l / 2, y)

ctx.arc(x + l / 2, y - r + 4, r, 0, 2 * PI)

ctx.lineTo(x + l / 2, y)

ctx.lineTo(x + l, y)

ctx.lineTo(x + l, y + l / 2)

ctx.arc(x + l + r - 4, y + l / 2, r, 0, 2 * PI)

ctx.lineTo(x + l, y + l / 2)

ctx.lineTo(x + l, y + l)

ctx.lineTo(x + l / 2, y + l)

ctx.arc(x + l / 2, y + l + 4, r, 0, 2 * PI)

ctx.lineTo(x + l / 2, y + l)

ctx.lineTo(x, y + l)

ctx.lineTo(x, y)

ctx.fillStyle = '#fff'

ctx[operation]()

ctx.beginPath()

ctx.arc(x, y + l / 2, r, 1.5 * PI, 0.5 * PI)

ctx.globalCompositeOperation = "xor"

ctx.fill()

}

function draw3(ctx, operation, x, y) {

ctx.beginPath()

ctx.moveTo(x, y)

ctx.lineTo(x + l / 2, y)

ctx.lineTo(x + l, y)

ctx.lineTo(x + l, y + l / 2)

ctx.arc(x + l + r - 4, y + l / 2, r, 0, 2 * PI)

ctx.lineTo(x + l, y + l / 2)

ctx.lineTo(x + l, y + l)

ctx.lineTo(x + l / 2, y + l)

ctx.arc(x + l / 2, y + l + 4, r, 0, 2 * PI)

ctx.lineTo(x + l / 2, y + l)

ctx.lineTo(x, y + l)

ctx.lineTo(x, y)

ctx.fillStyle = '#fff'

ctx[operation]()

ctx.beginPath()

ctx.arc(x, y + l / 2, r, 1.5 * PI, 0.5 * PI)

ctx.globalCompositeOperation = "xor"

ctx.fill()

}

function draw2(ctx, operation, x, y) {

ctx.beginPath()

ctx.moveTo(x, y)

ctx.lineTo(x + l / 2, y)

ctx.lineTo(x + l, y)

ctx.lineTo(x + l, y + l / 2)

ctx.arc(x + l + r - 4, y + l / 2, r, 0, 2 * PI)

ctx.lineTo(x + l, y + l / 2)

ctx.lineTo(x + l, y + l)

ctx.lineTo(x, y + l)

ctx.lineTo(x, y)

ctx.fillStyle = '#fff'

ctx[operation]()

ctx.beginPath()

ctx.arc(x, y + l / 2, r, 1.5 * PI, 0.5 * PI)

ctx.globalCompositeOperation = "xor"

ctx.fill()

}

function draw1(ctx, operation, x, y) {

ctx.beginPath()

ctx.moveTo(x, y)

ctx.lineTo(x + l / 2, y)

ctx.arc(x + l / 2, y - r + 4, r, 0, 2 * PI)

ctx.lineTo(x + l / 2, y)

ctx.lineTo(x + l, y)

ctx.lineTo(x + l, y + l / 2)

ctx.arc(x + l + r - 4, y + l / 2, r, 0, 2 * PI)

ctx.lineTo(x + l, y + l / 2)

ctx.lineTo(x + l, y + l)

ctx.lineTo(x, y + l)

ctx.lineTo(x, y)

ctx.fillStyle = '#fff'

ctx[operation]()

ctx.beginPath()

ctx.arc(x, y + l / 2, r, 1.5 * PI, 0.5 * PI)

ctx.globalCompositeOperation = "xor"

ctx.fill()

}

function sum(x, y) {

return x + y

}

function square(x) {

return x * x

}

class sliderImgPuzzle {

constructor({

el,

onSuccess,

onFail,

onRefresh

}) {

this.el = el

this.onSuccess = onSuccess

this.onFail = onFail

this.onRefresh = onRefresh

}

init() {

this.initDOM()

this.initImg()

this.draw()

this.bindEvents()

return this;

}

initDOM() {

const canvas = createCanvas(w, h)

const block = canvas.cloneNode(true)

const canvasContainer = createElement('div')

const sliderImgPuzzleContainer = createElement('div')

const refreshIcon = createElement('div')

const sliderImgPuzzleMask = createElement('div')

const sliderImgPuzzle = createElement('div')

const sliderImgPuzzleIcon = createElement('span')

const text = createElement('span')

canvasContainer.className = 'canvasContainer'

block.className = 'block'

sliderImgPuzzleContainer.className = 'sliderImgPuzzleContainer'

refreshIcon.className = 'refreshIcon'

sliderImgPuzzleMask.className = 'sliderImgPuzzleMask'

sliderImgPuzzle.className = 'sliderImgPuzzle'

sliderImgPuzzleIcon.className = 'sliderImgPuzzleIcon'

text.innerHTML = '向右滑动滑块填充拼图'

text.className = 'sliderImgPuzzleText'

const el = this.el

canvasContainer.appendChild(canvas)

canvasContainer.appendChild(refreshIcon)

canvasContainer.appendChild(block)

el.appendChild(canvasContainer)

sliderImgPuzzle.appendChild(sliderImgPuzzleIcon)

sliderImgPuzzleMask.appendChild(sliderImgPuzzle)

sliderImgPuzzleContainer.appendChild(sliderImgPuzzleMask)

sliderImgPuzzleContainer.appendChild(text)

el.appendChild(sliderImgPuzzleContainer)

Object.assign(this, {

canvas,

block,

canvasContainer,

sliderImgPuzzleContainer,

refreshIcon,

sliderImgPuzzle,

sliderImgPuzzleMask,

sliderImgPuzzleIcon,

text,

canvasCtx: canvas.getContext('2d'),

blockCtx: block.getContext('2d')

})

}

initImg() {

const img = createImg(() => {

this.canvasCtx.drawImage(img, 0, 0, w, h)

this.blockCtx.drawImage(img, 0, 0, w, h)

const y = this.y - r * 2 + 2

const ImageData = this.blockCtx.getImageData(this.x, y, L + r + 4, L + r + 4)

this.block.width = L

this.blockCtx.putImageData(ImageData, 0, y)

})

this.img = img

}

draw() {

this.x = getRandomNumberByRange(L + 10, w - (L + 10))

this.y = getRandomNumberByRange(10 + r * 2, h - (L + 10))

var num = Math.floor(Math.random() * 6 + 1);

draw(this.canvasCtx, 'fill', this.x, this.y, num)

draw(this.blockCtx, 'clip', this.x, this.y, num)

}

clean() {

this.canvasCtx.clearRect(0, 0, w, h)

this.blockCtx.clearRect(0, 0, w, h)

this.block.width = w

}

bindEvents() {

this.el.onselectstart = () => false

this.refreshIcon.onclick = () => {

this.reset()

typeof this.onRefresh === 'function' && this.onRefresh()

}

let originX, originY, trail = [],

isMouseDown = false

this.sliderImgPuzzle.ctrl = this;

this.sliderImgPuzzle.addEventListener('mousedown', function(e) {

if (!this.parentElement.parentElement.classList.contains("sliderImgPuzzleContainer_success")) {

originX = e.x, originY = e.y

isMouseDown = true

} else {

isMouseDown = false

}

if (!this.ctrl.isEnable) isMouseDown = false;

})

/*this.sliderImgPuzzle.addEventListener('mouseover', function(e) {

if (this.ctrl.isEnable)

this.parentElement.parentElement.parentElement.querySelector(".canvasContainer").style.display = "block";

})

this.canvasContainer.parentElement.addEventListener('mouseleave', function(e) {

this.querySelector(".canvasContainer").style.display = "none";

})*/

document.addEventListener('mousemove', (e) => {

if (!isMouseDown) return false

const moveX = e.x - originX

const moveY = e.y - originY

if (moveX < 0 || moveX + 38 >= w) return false

this.sliderImgPuzzle.style.left = moveX + 'px'

var blockLeft = (w - 40 - 20) / (w - 40) * moveX

this.block.style.left = blockLeft + 'px'

addClass(this.sliderImgPuzzleContainer, 'sliderImgPuzzleContainer_active')

this.sliderImgPuzzleMask.style.width = moveX + 'px'

trail.push(moveY)

})

document.addEventListener('mouseup', (e) => {

if (!isMouseDown) return false

isMouseDown = false

if (e.x == originX) return false

removeClass(this.sliderImgPuzzleContainer, 'sliderImgPuzzleContainer_active')

this.trail = trail

const {

spliced,

TuringTest

} = this.verify()

if (spliced) {

if (TuringTest) {

addClass(this.sliderImgPuzzleContainer, 'sliderImgPuzzleContainer_success')

typeof this.onSuccess === 'function' && this.onSuccess()

} else {

addClass(this.sliderImgPuzzleContainer, 'sliderImgPuzzleContainer_fail')

this.text.innerHTML = '再试一次'

this.reset()

}

} else {

addClass(this.sliderImgPuzzleContainer, 'sliderImgPuzzleContainer_fail')

typeof this.onFail === 'function' && this.onFail()

setTimeout(() => {

this.reset()

}, 500)

}

})

}

verify() {

const arr = this.trail

const average = arr.reduce(sum) / arr.length

const deviations = arr.map(x => x - average)

const stddev = Math.sqrt(deviations.map(square).reduce(sum) / arr.length)

const left = parseInt(this.block.style.left)

return {

spliced: Math.abs(left - this.x) < 10,

TuringTest: average !== stddev,

}

}

reset() {

this.sliderImgPuzzleContainer.className = 'sliderImgPuzzleContainer'

this.sliderImgPuzzle.style.left = 0

this.block.style.left = 0

this.sliderImgPuzzleMask.style.width = 0

this.clean()

this.img.src = getRandomImg()

this.draw()

}

enablePuzzle(enable) {

if (enable) {

this.isEnable = true;

} else this.isEnable = false;

}

}

this.each(function() {

var $SliderImgPuzzle = $(this);

setting.el = $SliderImgPuzzle[0];

var sip = new sliderImgPuzzle(setting).init();

$SliderImgPuzzle.data("LsSliderImgPuzzle", sip);

});

}

})(jQuery);

.block {

    position: absolute;

    left: 0;

    top: 0

}

.canvasContainer {

  /* display: none;*/

    position: absolute;

    bottom: 65px;

    background: #fff

}

.sliderImgPuzzleContainer {

    position: relative;

    text-align: center;

    width: 300px;

    height: 50px;

    font-size: 14px;

    line-height: 50px;

    background: #f7f9fa;

    color: #45494c;

    border: 1px solid #e4e7eb

}

.sliderImgPuzzleContainer_active .sliderImgPuzzle {

    height: 48px;

    top: -1px;

    border: 1px solid #1991fa

}

.sliderImgPuzzleContainer_active .sliderImgPuzzleMask {

    height: 48px;

    border-width: 1px

}

.sliderImgPuzzleContainer_success .sliderImgPuzzle {

    height: 48px;

    top: -1px;

    border: 1px solid #52ccba;

    background-color: #52ccba!important

}

.sliderImgPuzzleContainer_success .sliderImgPuzzleMask {

    height: 48px;

    border: 1px solid #52ccba;

    background-color: #d2f4ef

}

.sliderImgPuzzleContainer_success .sliderImgPuzzleIcon {

    background-position: 0 0!important

}

.sliderImgPuzzleContainer_fail .sliderImgPuzzle {

    height: 48px;

    top: -1px;

    border: 1px solid #f57a7a;

    background-color: #f57a7a!important

}

.sliderImgPuzzleContainer_fail .sliderImgPuzzleMask {

    height: 48px;

    border: 1px solid #f57a7a;

    background-color: #fce1e1

}

.sliderImgPuzzleContainer_fail .sliderImgPuzzleIcon {

    top: 19px;

    background-position: 0 -82px!important

}

.sliderImgPuzzleContainer_active .sliderImgPuzzleText, .sliderImgPuzzleContainer_success .sliderImgPuzzleText, .sliderImgPuzzleContainer_fail .sliderImgPuzzleText {

    visibility: hidden

}

.sliderImgPuzzleMask {

    position: absolute;

    left: 0;

    top: 0;

    height: 50px;

    border: 0 solid #1991fa;

    background: #d1e9fe

}

.sliderImgPuzzle {

    position: absolute;

    top: 0;

    left: 0;

    width: 50px;

    height: 48px;

    background: #fff;

    box-shadow: 0 0 3px rgba(0, 0, 0, .3);

    cursor: pointer;

    transition: background .2s linear

}

.sliderImgPuzzle:hover {

    background: #1991fa

}

.sliderImgPuzzle:hover .sliderImgPuzzleIcon {

    background-position: 0 -13px

}

.sliderImgPuzzleIcon {

    position: absolute;

    top: 19px;

    left: 17px;

    width: 14px;

    height: 12px;

    background: url(../images/icon.png) 0 -26px;

    background-size: 34px 471px

}

.refreshIcon {

    position: absolute;

    right: 0;

    top: 0;

    width: 34px;

    height: 34px;

    cursor: pointer;

    background: url(../images/icon.png) 0 -437px;

    background-size: 34px 471px

}

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 213,558评论 6赞 492
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,002评论 3赞 387
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 159,036评论 0赞 349
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,024评论 1赞 285
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,144评论 6赞 385
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,255评论 1赞 292
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,295评论 3赞 412
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,068评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,478评论 1赞 305
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,789评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,965评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,649评论 4赞 336
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,267评论 3赞 318
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,982评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,223评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,800评论 2赞 365
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,847评论 2赞 351

推荐阅读更多精彩内容

  • snapshot-1.0.0.js
    "use strict";function _classCallCheck(e,t){if(!(e instanc...
    久些阅读 2,028评论 0赞 2
  • angularjs长方形裁剪
    上网搜索了angularjs裁剪，发现只有正方形和圆形 http://www.cnblogs.com/smilec...
    四脚蛇阅读 730评论 0赞 1
  • Lua 5.1 参考手册
    Lua 5.1 参考手册 by Roberto Ierusalimschy, Luiz Henrique de F...
    苏黎九歌阅读 13,774评论 0赞 38
  • 2018-06-11
    mean to add the formatted="false" attribute?.[ 46% 47325/...
    ProZoom阅读 2,694评论 0赞 3
  • 冬天
    冬天是一个颓费的季节，除了一片片小麦在寒风中颤抖外，一切都是那么凋凌和无有生机。 寒冷、冰冻肆虐着，摧残着生命，撕...
    wangfengqun阅读 254评论 0赞 0