效果图
滑动解锁前：
滑动解锁后：
具体代码如下：（一个html页面，一个css文件，两个js文件）
目录结构：
slideUnlock.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>滑动解锁验证</title> <link rel="stylesheet" type="text/css" href="css/drag.css" /> <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/drag.js" type="text/javascript" charset="utf-8"></script> </head> <body> <!--<input type="hidden" id="code" />--> <div id="slide_box"> <div id="slide_xbox"> <div id="btn"> <i class="iconfont icon-double-right"></i> </div> </div> 拖动滑块验证 </div> </body> </html>drag.css
/* 滑动解锁验证 按钮样式 */ @font-face { font-family: "iconfont"; src: url('iconfont.eot?t=1516950505203'); /* IE9*/ src: url('iconfont.eot?t=1516950505203#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'), url('iconfont.ttf?t=1516950505203') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ url('iconfont.svg?t=1516950505203#iconfont') format('svg'); /* iOS 4.1- */ } .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-2guanbi:before { content: "\e602"; } .icon-fuxuansel:before { content: "\e64d"; } .icon-mima:before { content: "\e65b"; } .icon-double-right:before { content: "\e763"; } .icon-icon-:before { content: "\e6e6"; } .icon-xuanzhong:before { content: "\e619"; } /* 滑动解锁验证 其它样式 */ #slide_box { width: 100%; height: 40px; text-align: center; line-height: 40px; font-size: 14px; color: #717171; background-color: #e8e8e8; border: none; margin-bottom: 20px; } #slide_xbox { width: 50px; height: 40px; text-align: center; line-height: 40px; font-size: 16px; color: #fff; position: absolute; background: #35b34a; } #btn { cursor: pointer; width: 50px; height: 40px; background-color: #fff; float: right; -webkit-box-shadow: 0px 0px 15px 0px #ddd; -moz-box-shadow: 0px 0px 15px 0px #ddd; box-shadow: 0px 0px 15px 0px #ddd; color: #8a8c97; } #btn > .iconfont { font-size: 20px; } drag.js var locked; window.onload = function() { slide(); //禁止F12 $("*").keydown(function(e) { //判断按键 e = window.event || e || e.which; if (e.keyCode == 123) { e.keyCode = 0; return false; } }); //禁止审查元素 $(document).bind("contextmenu", function(e) { return false; }); } window.onresize = function() { if (locked == true) { var boxWidth = $('#slide_box').width(); $('#slide_xbox').width(boxWidth); } else { slide(); } } //滑动解锁移动 function slide() { var slideBox = $('#slide_box')[0]; var slideXbox = $('#slide_xbox')[0]; var btn = $('#btn')[0]; var slideBoxWidth = slideBox.offsetWidth; var btnWidth = btn.offsetWidth; //pc端 btn.ondragstart = function() { return false; }; btn.onselectstart = function() { return false; }; btn.onmousedown = function(e) { var disX = e.clientX - btn.offsetLeft; document.onmousemove = function(e) { var objX = e.clientX - disX + btnWidth; if (objX < btnWidth) { objX = btnWidth } if (objX > slideBoxWidth) { objX = slideBoxWidth } $('#slide_xbox').width(objX + 'px'); }; document.onmouseup = function(e) { var objX = e.clientX - disX + btnWidth; if (objX < slideBoxWidth) { objX = btnWidth; } else { objX = slideBoxWidth; locked = true; /*$("#code").val("1");*/ $('#slide_xbox').html('验证通过<div id="btn"><i class="iconfont icon-xuanzhong" style="color: #35b34a;"></i></div>'); } $('#slide_xbox').width(objX + 'px'); document.onmousemove = null; document.onmouseup = null; }; }; //移动端 var cont = $("#btn"); var startX = 0, sX = 0, moveX = 0, leftX = 0; cont.on({ //绑定事件 touchstart: function(e) { startX = e.originalEvent.targetTouches[0].pageX; //获取点击点的X坐标 sX = $(this).offset().left; //相对于当前窗口X轴的偏移量 leftX = startX - sX; //鼠标所能移动的最左端是当前鼠标距div左边距的位置 }, touchmove: function(e) { e.preventDefault(); moveX = e.originalEvent.targetTouches[0].pageX; //移动过程中X轴的坐标 var objX = moveX - leftX + btnWidth; if (objX < btnWidth) { objX = btnWidth } if (objX > slideBoxWidth) { objX = slideBoxWidth } $('#slide_xbox').width(objX + 'px'); }, touchend: function(e) { var objX = moveX - leftX + btnWidth; if (objX < slideBoxWidth) { objX = btnWidth; } else { objX = slideBoxWidth; locked = true; /*$("#code").val("1");*/ $('#slide_xbox').html('验证通过<div id="btn"><i class="iconfont icon-xuanzhong" style="color: #35b34a;"></i></div>'); } $('#slide_xbox').width(objX + 'px'); } }); }