滑塊驗(yàn)證PC端膝舅，手機(jī)端需稍作改動(dòng)

;

(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 = '向右滑動(dòng)滑塊填充拼圖'

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

}

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市搭盾，隨后出現(xiàn)的幾起案子鸯隅，更是在濱河造成了極大的恐慌蝌以，老刑警劉巖，帶你破解...
    沈念sama閱讀 216,372評論 6贊 498
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異碍彭，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)舰褪，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,368評論 3贊 392
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門占拍，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人捎迫，你說我怎么就攤上這事晃酒。” “怎么了窄绒？”我有些...
    開封第一講書人閱讀 162,415評論 0贊 353
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵贝次，是天一觀的道長。 經(jīng)常有香客問我彰导，道長蛔翅，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 58,157評論 1贊 292
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任山析，我火速辦了婚禮，結(jié)果婚禮上掏父，老公的妹妹穿的比我還像新娘笋轨。我一直安慰自己，他們只是感情好赊淑，可當(dāng)我...
    茶點(diǎn)故事閱讀 67,171評論 6贊 388
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布爵政。 她就那樣靜靜地躺著，像睡著了一般膏燃。 火紅的嫁衣襯著肌膚如雪茂卦。 梳的紋絲不亂的頭發(fā)上，一...
    開封第一講書人閱讀 51,125評論 1贊 297
  • 城市分裂傳說
    那天组哩，我揣著相機(jī)與錄音，去河邊找鬼处渣。 笑死伶贰，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的罐栈。 我是一名探鬼主播黍衙，決...
    沈念sama閱讀 40,028評論 3贊 417
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼荠诬！你這毒婦竟也來了琅翻？” 一聲冷哼從身側(cè)響起位仁，我...
    開封第一講書人閱讀 38,887評論 0贊 274
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎方椎，沒想到半個(gè)月后聂抢，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 45,310評論 1贊 310
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡棠众，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,533評論 2贊 332
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年琳疏，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片闸拿。...
    茶點(diǎn)故事閱讀 39,690評論 1贊 348
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡空盼，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出新荤，到底是詐尸還是另有隱情揽趾，我是刑警寧澤，帶...
    沈念sama閱讀 35,411評論 5贊 343
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布苛骨，位于F島的核電站篱瞎，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏智袭。R本人自食惡果不足惜奔缠，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,004評論 3贊 325
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望吼野。 院中可真熱鬧校哎，春花似錦、人聲如沸瞳步。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0贊 22
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽单起。三九已至抱怔，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間嘀倒，已是汗流浹背屈留。 一陣腳步聲響...
    開封第一講書人閱讀 32,812評論 1贊 268
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留测蘑，地道東北人灌危。 一個(gè)月前我還...
    沈念sama閱讀 47,693評論 2贊 368
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像碳胳，于是被迫代替她去往敵國和親勇蝙。 傳聞我的和親對象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,577評論 2贊 353

推薦閱讀更多精彩內(nèi)容

  • "use strict";function _classCallCheck(e,t){if(!(e instanc...
    久些閱讀 2,029評論 0贊 2
  • 上網(wǎng)搜索了angularjs裁剪挨约，發(fā)現(xiàn)只有正方形和圓形 http://www.cnblogs.com/smilec...
    四腳蛇閱讀 731評論 0贊 1
  • Lua 5.1 參考手冊 by Roberto Ierusalimschy, Luiz Henrique de F...
    蘇黎九歌閱讀 13,783評論 0贊 38
  • mean to add the formatted="false" attribute?.[ 46% 47325/...
    ProZoom閱讀 2,696評論 0贊 3
  • 冬天是一個(gè)頹費(fèi)的季節(jié)味混，除了一片片小麥在寒風(fēng)中顫抖外产雹，一切都是那么凋凌和無有生機(jī)。 寒冷翁锡、冰凍肆虐著蔓挖，摧殘著生命，撕...
    wangfengqun閱讀 262評論 0贊 0