直播商城源码，验证方式之一，滑块验证
直播商城源码，验证方式之一，滑块验证实现的相关代码
1 | <!doctype html><br><html><br><head><br><meta charset="utf-8"><br><title>滑动验证</title><br><script src="https://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script><br><style><br>#slider {<br>margin:100px auto;<br>width:300px;<br>height:40px;<br>position:relative;<br>border-radius:2px;<br><br>overflow:hidden;<br>text-align:center;<br>user-select:none;<br>-moz-user-select:none;<br>-webkit-user-select:none<br>}<br>#slider_bg {<br>position:absolute;<br>left:0;<br>top:0;<br>height:100%;<br>background-color:#7ac23c;<br>z-index:1<br>}<br>#label {<br>width:46px;<br>position:absolute;<br>left:0;<br>top:0;<br>height:38px;<br>line-height:38px;<br>border:1px solid #ccc;<br>background:#fff;<br>z-index:3;<br>cursor:move;<br>color:#ff9e77;<br>font-size:16px;<br>font-weight:900<br>}<br>#labelTip {<br>position:absolute;<br>left:0;<br>width:100%;<br>height:100%;<br>font-size:13px;<br>font-family:microsoft yahei,serif;<br>color:#787878;<br>line-height:38px;<br>text-align:center;<br>z-index:2<br>}<br></style><br></head><br><body><br><div id="demo"><br> <div id="slider"><br> <div id="slider_bg"></div><br> <span id="label">>></span> <span id="labelTip">拖动滑块验证</span><br> </div><br></div><br> <br><script><br>(function($, window, document, undefined) {<br> function SliderUnlock(elm, options, success) {<br> var me = this;<br> var $elm = me.checkElm(elm) ? $(elm) : $;<br> success = me.checkFn(success) ? success : function() {};<br> var opts = {<br> successLabelTip: "Successfully Verified",<br> duration: 200,<br> swipestart: false,<br> min: 0,<br> max: $elm.width(),<br> index: 0,<br> IsOk: false,<br> lableIndex: 0<br> };<br> opts = $.extend(opts, options || {});<br> me.elm = $elm;<br> me.opts = opts;<br> me.swipestart = opts.swipestart;<br> me.min = opts.min;<br> me.max = opts.max;<br> me.index = opts.index;<br> me.isOk = opts.isOk;<br> me.labelWidth = me.elm.find('#label').width();<br> me.sliderBg = me.elm.find('#slider_bg');<br> me.lableIndex = opts.lableIndex;<br> me.success = success;<br> }<br> SliderUnlock.prototype.init = function() {<br> var me = this;<br> me.updateView();<br> me.elm.find("#label").on("mousedown", function(event) {<br> var e = event || window.event;<br> me.lableIndex = e.clientX - this.offsetLeft;<br> me.handerIn();<br> }).on("mousemove", function(event) {<br> me.handerMove(event);<br> }).on("mouseup", function(event) {<br> me.handerOut();<br> }).on("mouseout", function(event) {<br> me.handerOut();<br> }).on("touchstart", function(event) {<br> var e = event || window.event;<br> me.lableIndex = e.originalEvent.touches[0].pageX - this.offsetLeft;<br> me.handerIn();<br> }).on("touchmove", function(event) {<br> me.handerMove(event, "mobile");<br> }).on("touchend", function(event) {<br> me.handerOut();<br> });<br> };<br> SliderUnlock.prototype.handerIn = function() {<br> var me = this;<br> me.swipestart = true;<br> me.min = 0;<br> me.max = me.elm.width();<br> };<br> SliderUnlock.prototype.handerOut = function() {<br> var me = this;<br> me.swipestart = false;<br> if (me.index < me.max) {<br> me.reset();<br> }<br> };<br> SliderUnlock.prototype.handerMove = function(event, type) {<br> var me = this;<br> if (me.swipestart) {<br> event.preventDefault();<br> event = event || window.event;<br> if (type == "mobile") {<br> me.index = event.originalEvent.touches[0].pageX - me.lableIndex;<br> } else {<br> me.index = event.clientX - me.lableIndex;<br> }<br> me.move();<br> }<br> };<br> SliderUnlock.prototype.move = function() {<br> var me = this;<br> if ((me.index + me.labelWidth) >= me.max) {<br> me.index = me.max - me.labelWidth - 2;<br> me.swipestart = false;<br> me.isOk = true;<br> }<br> if (me.index < 0) {<br> me.index = me.min;<br> me.isOk = false;<br> }<br> if (me.index + me.labelWidth + 2 == me.max && me.max > 0 && me.isOk) {<br> $('#label').unbind().next('#labelTip').text(me.opts.successLabelTip).css({<br> 'color': '#fff'<br> });<br> me.success();<br> }<br> me.updateView();<br> };<br> SliderUnlock.prototype.updateView = function() {<br> var me = this;<br> me.sliderBg.animate({<br> 'width': me.index<br> }, 0);<br> me.elm.find("#label").animate({<br> "left": me.index + "px"<br> }, 0)<br> };<br> SliderUnlock.prototype.reset = function() {<br> var me = this;<br> me.index = 0;<br> me.sliderBg.animate({<br> 'width': 0<br> }, me.opts.duration);<br> me.elm.find("#label").animate({<br> left: me.index<br> }, me.opts.duration).next("#lableTip").animate({<br> opacity: 1<br> }, me.opts.duration);<br> me.updateView();<br> };<br> SliderUnlock.prototype.checkElm = function(elm) {<br> if ($(elm).length > 0) {<br> return true;<br> } else {<br> throw "this element does not exist.";<br> }<br> };<br> SliderUnlock.prototype.checkFn = function(fn) {<br> if (typeof fn === "function") {<br> return true;<br> } else {<br> throw "the param is not a function.";<br> }<br> };<br> window['SliderUnlock'] = SliderUnlock;<br>})(jQuery, window, document);<br> <br>$(function() {<br> var slider = new SliderUnlock("#slider", {<br> successLabelTip: "验证成功"<br> }, function() {<br> alert("验证成功");<br> });<br> slider.init();<br>})<br></script><br> <br></body><br></html> |
以上就是 直播商城源码，验证方式之一，滑块验证实现的相关代码，更多内容欢迎关注之后的文章
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现