做苗木网站哪家做得好,网站建设合同示范文本,高校学风建设网站,脱发严重是什么原因引起的前端 滑动拼图校验 纯js组合式调用效果思路代码效果 思路
独立滑块和拼图#xff0c;通过实例方法组合使用,滑块和拼图均通过指定元素容器加载内容通过canvas 路径切片
代码
!DOCTYPE html
html langen
headmeta charsetUTF…
前端 滑动拼图校验 纯js组合式调用效果思路代码效果 思路
独立滑块和拼图通过实例方法组合使用,滑块和拼图均通过指定元素容器加载内容通过canvas 路径切片
代码
!DOCTYPE html
html langen
headmeta charsetUTF-8title拼图/titlestyle.slider-validator {position: relative;display: inline-block;}#refresh {position: absolute;top: 10px;right: 20px;width: 20px;height: 20px;background-image: url(data:image/svgxml;base64,PHN2ZyB0PSIxNjY3MzYwNTYxMTA1IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjI3MTEiIHdpZHRoPSIxMjgiIGhlaWdodD0iMTI4Ij48cGF0aCBkPSJNNTcxLjczMzMzMyAyMjcuODRWMTUxLjQ2NjY2N2MwLTI1LjE3MzMzMy0xOS42MjY2NjctMzUuNDEzMzMzLTMzLjcwNjY2Ni0yNS4xNzMzMzRMMzI3LjY4IDI3Mi42NGEyMS4zMzMzMzMgMjEuMzMzMzMzIDAgMCAwIDAgMzUuNDEzMzMzbDIxMC4zNDY2NjcgMTQ2Ljc3MzMzNGEyMS43NiAyMS43NiAwIDAgMCAzMy43MDY2NjYtMTcuOTJWMzg2LjU2YTIxLjMzMzMzMyAyMS4zMzMzMzMgMCAwIDEgMjMuMDQtMjEuMzMzMzMzIDI3MS43ODY2NjcgMjcxLjc4NjY2NyAwIDAgMSAyMzkuMzYgMjEwLjM0NjY2NiAyNjAuMjY2NjY3IDI2MC4yNjY2NjcgMCAwIDAgNi40LTU4LjAyNjY2NiAyNzEuMzYgMjcxLjM2IDAgMCAwLTI0OC43NDY2NjYtMjY4LjggMjAuOTA2NjY3IDIwLjkwNjY2NyAwIDAgMS0yMC4wNTMzMzQtMjAuOTA2NjY3ek00NDMuNzMzMzMzIDc5MC42MTMzMzN2ODUuMzMzMzM0YTIxLjMzMzMzMyAyMS4zMzMzMzMgMCAwIDAgMzMuMjggMTcuNDkzMzMzbDIxMS4yLTE0Ny4yYTIxLjMzMzMzMyAyMS4zMzMzMzMgMCAwIDAgMC0zNC41NmwtMjExLjItMTQ3LjJhMjAuOTA2NjY3IDIwLjkwNjY2NyAwIDAgMC0zMy4yOCAxNy4wNjY2Njd2NTEuMmEyMC45MDY2NjcgMjAuOTA2NjY3IDAgMCAxLTIyLjYxMzMzMyAyMS4zMzMzMzMgMjcxLjc4NjY2NyAyNzEuNzg2NjY3IDAgMCAxLTIzOS43ODY2NjctMjEwLjM0NjY2NyAyNjAuMjY2NjY3IDI2MC4yNjY2NjcgMCAwIDAtNi40IDU4LjAyNjY2N0EyNzAuNTA2NjY3IDI3MC41MDY2NjcgMCAwIDAgNDIzLjY4IDc2OGEyMS43NiAyMS43NiAwIDAgMSAyMC4wNTMzMzMgMjIuNjEzMzMzeiIgZmlsbD0iIzY2NjY2NiIgcC1pZD0iMjcxMiIPC9wYXRoPjwvc3ZnPg);background-repeat: no-repeat;background-position: center center;background-size: cover;cursor: pointer;filter: brightness(0.1);}.loading-mask {position: absolute;left: 0;top: 0;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;z-index: 2;background: rgba(255, 255, 255, 0.75);}.loading-mask svg {animation: ani-loading 3s linear infinite;}keyframes ani-loading {0% {transform: rotate(0);}100% {transform: rotate(360deg);}}#puzzle {position: relative;border-radius: 15px;overflow: hidden;}#drag-track {position: relative;height: 40px;border: 1px solid #ddd;border-radius: 3px;background: #fff;text-align: center;line-height: 40px;user-select: none;}.drag-wrap {position: absolute;top: 0;left: 0;background: rgba(224, 224, 224, 0.71);}.drag-wrap.success {background: rgba(13, 143, 255, 0.82);}.drag-wrap.fail {background: rgba(255, 110, 125, 0.83);}.drag-handle {display: flex;align-items: center;justify-content: center;font-size: 20px;width: 40px;height: 40px;border-radius: 3px;box-shadow: #9b9b9b 1px 1px 4px;background: #fff;cursor: pointer;}.drag-handle:after {content: ;display: block;width: 100%;height: 100%;background: url(data:image/svgxml;base64,PHN2ZyB0PSIxNjY3MzYwNjgyODU1IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjM5MTkiIHdpZHRoPSIxMjgiIGhlaWdodD0iMTI4Ij48cGF0aCBkPSJNNTY3LjMyNTA1IDU0Ny4xODUzNmMyMC45NzA2MTQtMjEuNDc5MTk3IDIwLjk3MDYxNC01Ni4zMDc0MjQgMC03Ny43OTA3MTRMMTg1LjI1MTE2OCA3Ny4xMTUzMzJjLTIwLjk3MTYzNy0yMS40NzcxNS01NC45NzUwNzktMjEuNDc3MTUtNzUuOTQ4NzYzIDAtMjAuOTczNjg0IDIxLjQ4NDMxNC0yMC45NzM2ODQgNTYuMzA5NDcgMCA3Ny43OTM3ODRsMzQ0LjE4ODAxNiAzNTMuMzgzNDQ2LTM0NC4xODgwMTYgMzUzLjM4NDQ2OWMtMjAuOTczNjg0IDIxLjQ4NDMxNC0yMC45NzM2ODQgNTYuMzExNTE3IDAgNzcuNzkyNzYgMjAuOTcxNjM3IDIxLjQ4MjI2NyA1NC45NzUwNzkgMjEuNDgyMjY3IDc1Ljk0ODc2MyAwbDM4Mi4wNzI4NTgtMzkyLjI4MDMzNyAwLjAwMTAyNC0wLjAwNDA5NHpNNDQwLjYwODAyIDE1NC45MDgwOTJsMzQ0LjE4NTk3IDM1My4zODM0NDYtMzQ0LjE4NTk3IDM1My4zODU0OTNjLTIwLjk3MzY4NCAyMS40ODQzMTQtMjAuOTczNjg0IDU2LjMxMTUxNyAwIDc3Ljc5Mjc2IDIwLjk3MjY2MSAyMS40ODIyNjcgNTQuOTc1MDc5IDIxLjQ4MjI2NyA3NS45NDk3ODYgMGwzODIuMDc0OTA1LTM5Mi4yODEzNjFjMjAuOTY2NTIxLTIxLjQ3ODE3NCAyMC45NjY1MjEtNTYuMzA3NDI0IDAtNzcuNzkwNzE0TDUxNi41NTU3NTkgNzcuMTE1MzMyYy0yMC45NzI2NjEtMjEuNDc3MTUtNTQuOTc1MDc5LTIxLjQ3NzE1LTc1Ljk0OTc4NiAwLTIwLjk3MTYzNyAyMS40ODMyOS0yMC45NzE2MzcgNTYuMzA5NDcgMC4wMDIwNDcgNzcuNzkyNzZ6IiBwLWlkPSIzOTIwIj48L3BhdGgPC9zdmc) no-repeat center /60% 60%;opacity: 0.5;}.drag-handle:hover:after {opacity: 1;}/style
/head
body
div classslider-validator!--拼图容器--div idpuzzle/div!--自定义 加载中以及切换拼图--div classloading-masksvg viewBox0 0 1024 1024 version1.1 xmlnshttp://www.w3.org/2000/svgwidth40 height40path dM484 64h56c4.42 0 8 3.58 8 8v248c0 4.42-3.58 8-8 8h-56c-4.42 0-8-3.58-8-8V72c0-4.42 3.58-8 8-8z m0 632h56c4.42 0 8 3.58 8 8v248c0 4.42-3.58 8-8 8h-56c-4.42 0-8-3.58-8-8V704c0-4.42 3.58-8 8-8z m324.98-520.58l39.6 39.6c3.12 3.12 3.12 8.19 0 11.31L673.22 401.69c-3.12 3.12-8.19 3.12-11.31 0l-39.6-39.6c-3.12-3.12-3.12-8.19 0-11.31l175.36-175.36c3.13-3.13 8.19-3.13 11.31 0zM362.09 622.31l39.6 39.6c3.12 3.12 3.12 8.19 0 11.31L226.33 848.58c-3.12 3.12-8.19 3.12-11.31 0l-39.6-39.6c-3.12-3.12-3.12-8.19 0-11.31l175.36-175.36a7.985 7.985 0 0 1 11.31 0zM960 484v56c0 4.42-3.58 8-8 8H704c-4.42 0-8-3.58-8-8v-56c0-4.42 3.58-8 8-8h248c4.42 0 8 3.58 8 8z m-632 0v56c0 4.42-3.58 8-8 8H72c-4.42 0-8-3.58-8-8v-56c0-4.42 3.58-8 8-8h248c4.42 0 8 3.58 8 8z m520.58 324.98l-39.6 39.6c-3.12 3.12-8.19 3.12-11.31 0L622.31 673.22c-3.12-3.12-3.12-8.19 0-11.31l39.6-39.6c3.12-3.12 8.19-3.12 11.31 0l175.36 175.36c3.13 3.13 3.13 8.19 0 11.31zM401.69 362.09l-39.6 39.6c-3.12 3.12-8.19 3.12-11.31 0L175.42 226.33c-3.12-3.12-3.12-8.19 0-11.31l39.6-39.6c3.12-3.12 8.19-3.12 11.31 0l175.36 175.36a7.985 7.985 0 0 1 0 11.31z/path/svg/divdiv idrefresh/div
/div
br
!--滑块容器--
div iddrag-track stylewidth: 400px/div
scriptconst PI Math.PI, PI_05 PI * 0.5, PI_15 PI * 1.5
const _Vertices [5, 1, 5, 1, 3, 0, 3, 2, 5, 5, 5, 5, 6, 3, 4, 3, 1, 5, 1, 5, 3, 6, 3, 4, 1, 1, 1, 1, 0, 3, 2, 3]
/*
简单包装创建标签并添加属性*/
const createElement (tag, attrs) {let $el tag instanceof Node ? tag : document.createElement(tag)if (attrs) {Object.keys(attrs).forEach(k $el.setAttribute(k, attrs[k]))}return $el
}/*** 拼图控制类* [C]:突出|凹陷圆形*/
class Puzzle {//[C]半径 circleRadiocr 5//[C]嵌入边框偏移量 circleOffsetco 2Radian nullDO null//切片尺寸clipWidth 0clipHeight 0//背景尺寸bgWidth 0bgHeight 0//切片偏移量offsetLeft 0$Indicator nullconstructor(rootSelector) {this.$Root document.querySelector(rootSelector)}//设置计算配置init({ cr 5, co 2, clipWidth 60, clipHeight 60, bgWidth 300, bgHeight 200 }) {const vm thisvm.cr crvm.co covm.clipWidth clipWidthvm.clipHeight clipHeightvm.bgWidth bgWidthvm.bgHeight bgHeight//radian [C]与边框的焦点和圆心的辐射角一半弧度值const _CR Math.acos((cr - co) / cr)//[C]的绘制圆心集合vm.Radian [[PI_05 _CR, PI_05 - _CR], [PI _CR, PI - _CR], [_CR - PI_05, PI_15 - _CR], [_CR, -_CR],[PI_15 - _CR, _CR - PI_05], [-_CR, _CR], [PI_05 - _CR, PI_05 _CR], [PI - _CR, PI _CR],]//[C] 圆心偏移vm.DO co - cr}setOffset(offsetLeft) {this.$Indicator.style.left ${offsetLeft}px}load(src) {const vm thisconst { bgWidth, bgHeight, clipWidth, clipHeight, DO, cr, Radian } vm//没有指定图片则随机从图库获取if (!src) {src https://picsum.photos/${bgWidth}/${bgHeight}}//无论如何都重新创建 组件内元素以保证画布初始化const $ClipBg createElement(canvas, { width: bgWidth, height: bgHeight })const $ClipBlock createElement(canvas, { width: bgWidth, height: bgHeight })const $Indicator createElement(img)vm.$Root.style.cssText ;width:${bgWidth}px;height:${bgHeight}pxvm.$Root.innerHTML vm.$Root.append($ClipBg, $Indicator)const boxCtx $ClipBg.getContext(2d)const blockCtx $ClipBlock.getContext(2d)//随机切片位置const left bgWidth / 2 Math.random() * (bgWidth - clipWidth - cr * 2 - bgWidth / 2)const top bgHeight / 2 - clipHeight / 2//定义高频值const xa [left DO, left, left - DO, left clipWidth / 2, left clipWidth DO, left clipWidth, left clipWidth - DO]const ya [top DO, top, top - DO, top clipHeight / 2, top clipHeight DO, top clipHeight, top clipHeight - DO]//随机各条边 [C]类型const _MODES [1, 1, 1, 1].map(d Math.random() 0.5 ? 1 : -1)let offsetLeft _MODES[3] 1 ? left - (cr - DO) : left;$Indicator.style left:0;position:absolute;filter:drop-shadow(2px 5px 4px #000);transform:translateX(-${offsetLeft}px)vm.offsetLeft offsetLeftvm.$Indicator $Indicatorlet image new Image()image.crossOrigin Anonymous;image.src srcreturn new Promise((resolve, reject) {image.onerror rejectimage.onload _ {const draw ctx {ctx.globalCompositeOperation destination-overctx.moveTo(left, top);_MODES.forEach((type, index) {//0 1| 2 3 |4 5 |6 7let _v _Vertices.slice(index * 8, (index 1) * 8)if (type 0) {return ctx.lineTo(xa[_v[0]], ya[_v[1]]);}if (type 0) {ctx.arc(xa[_v[4]], ya[_v[5]], cr, ...(Radian[index]), false)} else {ctx.arc(xa[_v[6]], ya[_v[7]], cr, ...(Radian[index 4]), true)}ctx.lineTo(xa[_v[2]], ya[_v[3]])})}//绘制切片draw(blockCtx)blockCtx.clip()blockCtx.drawImage(image, 0, 0, bgWidth, bgHeight)//绘制背景draw(boxCtx)boxCtx.fillStyle #fffboxCtx.fill()boxCtx.drawImage(image, 0, 0, bgWidth, bgHeight)//设置指示器图片数据$Indicator.src $ClipBlock.toDataURL(image/png, 1)resolve()}})}
}class Slider {//设置结果状态以及操作偏移$DragWrap null//控制交互是否可行lock false//脚本检测turingTest falseconstructor({ root, endHandle, moveHandle }) {const vm thislet $Root document.querySelector(root)let $DragWrap createElement(div, { class: drag-wrap })let $DragHandle createElement(div, { class: drag-handle })$Root.innerHTML span向右拖动滑块填充拼图/span$DragWrap.append($DragHandle)$Root.append($DragWrap)vm.$DragWrap $DragWraplet startX 0, startY 0, leftResult 0//鼠标滑动const MMH e {leftResult Math.min(Math.max(0, e.clientX - startX), $Root.clientWidth - $DragHandle.offsetWidth)if (e.clientY - startY ! 0) {vm.turingTest true}$DragWrap.style.paddingLeft ${leftResult}pxmoveHandle.call(this, leftResult)}//鼠标放开const MUH e {$Root.removeEventListener(mousemove, MMH)$Root.removeEventListener(mouseup, MUH)endHandle.call(this, leftResult)vm.lock true}//鼠标按下$Root.addEventListener(mousedown, e {if (!vm.lock) {startX e.clientXstartY e.clientY$Root.addEventListener(mousemove, MMH)$Root.addEventListener(mouseup, MUH)}})}reset() {this.$DragWrap.classList.remove(fail, success)this.$DragWrap.style.paddingLeft 0pxthis.lock false}setSuccess() {this.$DragWrap.classList.remove(fail)this.$DragWrap.classList.add(success)}setFail() {this.$DragWrap.classList.remove(success)this.$DragWrap.classList.add(fail)}
}/*组合使用 滑块和拼图*/function loadGroupPlugin() {//初始化拼图let pz new Puzzle(#puzzle)pz.init({cr: 8,co: 4,clipWidth: 40,clipHeight: 40,bgWidth: 400,bgHeight: 300,})//初始化滑块let slider new Slider({root: #drag-track,endHandle(left) {if (!this.turingTest) {//未通过简单脚本检测slider.setFail()} else {//进行校验if (Math.abs(pz.offsetLeft - left) 10) {slider.setSuccess()} else {slider.setFail()}}setTimeout(_ {slider.reset()load()}, 2000)},moveHandle(left) {pz.setOffset(left)}})// 获取自定义加载中提示let $loading document.querySelector(.loading-mask)let load src {//设置loading$loading.style.display flexpz.load(src).then(d {slider.lock false$loading.style.display none}).catch(d {$loading.innerText 获取图片失败slider.lock true})}load(./c.jpg)let $change document.getElementById(refresh)$change.addEventListener(click, _ {load()})
}loadGroupPlugin()/script/body
/html
