代码引用的css和js都可以在线将所有代码复制到一个html中直接打开，非常简单。 将滑块div添加到代码库div中变色div和关键字div的末尾，并将鼠标移动事件绑定到滑块div
！ doctypehtmlhtmlheadmetacharset=' utf-8 ' title/titlestylescoped.drag { border-radius 336030 px； position: relative； 背景色： # 75 CD F9； width: 300px； height: 34px； 玛姬- left : 30px； margin-top: 100px； line-height: 34px； 文本对齐3360中心； }.handler { border-radius :30 px； 位置： absolute； top: 0px； left: 0px； width: 40px； 高清： 32px； border : 1px固态# CCC； cursor: move； }.handler _ BG { background : # fff URL (data : image/png； base64， ivborw0kgoaaaansuheugaaabaaaqcayaaagxrfwhrtb2z0d2fyzqbbzg9izsbjbwnzvjlywr5ccllpaaaaa3HPV FH0we1momnvbs5hzg 9iz s 54 e hhhhe IBP ZD0ivzvnme1wq2VOA uh6CMV tek 5u y3 pryzlkij8id x4 on HTC G1 LD gege G1 sbnm6ed0iywrvymu 6b nm6bwv0ys 8i ihg6eg1wdg S9 ikf kb2jlifhnucbdb3jlifhnucbdb owmcagicagicagij4gphjkzjpsreygeg1sbnm6cmrmpsjodhrwoi8VD 3d3lnczlm 9yz y8 xotk5lzaylziylxjkzi1zew 50 yxgtbnmjizi byzy6ywjvdxq 9ii ge 1 ucy5hzg 9iz S5 JB 20 vegfwlzeumc9TB S8 iihhtbg 5z onn0umvmpsjodhrwoi8vbnmuywrvymuy 29t L3 HHT BG2vszwyjiib4bwxuczp 4b xa9 imh0DH a6l y 9u cy5hzg 9ib tce1no K9 yawdpbmfsrg9JD w1 lbnrjrd0ie G1 wlmrpzdo0zdhlnwy5my 05 nmi MTU2ztyihhtce1nokrvy3vtzw 50 suq9in HTC C5 kawq6ntvemurgmkvfmmtfnei tce1no klu C3 rhbmnlsuq9in HTC C5 pawq6nttawq6cmjq 2m0ex MD Q1 ouyihtcdpdcmvhdg 9y VG 9v BD0iqwrvymugughvdg 9z ag9wiendiwmtqgke1hy2ludg9Zack zyb 20g C3 rsz wy 6a o2mt C5 nzn mzs 02 otqxltqyotytiwni 02 ndi2ytnkowu5ymuiihn0umvmomrvy3vtzw 50 suq9in HTC C5 kawq6ngq4ztvmotmtotzinc 00 ztvklthoth w9 UPI A8 L3 jkzjpsreyidwvedp4bxbtzxrhpia8P3 hwywnrzxqgzw5kpsjyij 8yi rg4aaalfjrefuenpi/p/pwmlgimbqka9abonfsiiboxkcinhycacdubyoswaiopxwjciacfegbqz1av BSI S5 otk/8 tkmnejwgqiugtquijwaxuf3yx3xygieiflwhpkyawbi1xgswxuligf9a7mqkbwtlhbxaflhgpgqeactkmncu 6a L9 D8 Wii4hov k3 itkwjaxwumlogqhmse 45 viq2AAAA }.handler _ ok _ BG { background : # fff URL (data : image/png； base64，ivborw0kggoaaaaansuheugaabaaaqcay
AAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDlBRDI3NjVGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDlBRDI3NjRGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDphNWEzMWNhMC1hYmViLTQxNWEtYTEwZS04Y2U5NzRlN2Q4YTEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+k+sHwwAAASZJREFUeNpi/P//PwMyKD8uZw+kUoDYEYgloMIvgHg/EM/ptHx0EFk9I8wAoEZ+IDUPiIMY8IN1QJwENOgj3ACo5gNAbMBAHLgAxA4gQ5igAnNJ0MwAVTsX7IKyY7L2UNuJAf+AmAmJ78AEDTBiwGYg5gbifCSxFCZoaBMCy4A4GOjnH0D6DpK4IxNSVIHAfSDOAeLraJrjgJp/AwPbHMhejiQnwYRmUzNQ4VQgDQqXK0ia/0I17wJiPmQNTNBEAgMlQIWiQA2vgWw7QppBekGxsAjIiEUSBNnsBDWEAY9mEFgMMgBk00E0iZtA7AHEctDQ58MRuA6wlLgGFMoMpIG1QFeGwAIxGZo8GUhIysmwQGSAZgwHaEZhICIzOaBkJkqyM0CAAQDGx279Jf50AAAAAABJRU5ErkJggg==") no-repeat center;}.drag_bg {border-radius:30px;background-color: #13CE66;height: 34px;width: 0px;}.drag_text {position: absolute;top: 0px;width: 300px;-moz-user-select: none;-webkit-user-select: none;user-select: none;-o-user-select: none;-ms-user-select: none;}</style></head><body><div id="app"><div class="drag" ><div class="drag_bg"></div><div class="drag_text">{{confirmWords}}</div><div @mousedown="mousedownFn($event)" class="handler handler_bg"></div></div></div><script src="https://cdn.jsdelivr.net/npm/vue"></script><script src="https://unpkg.com/element-ui/lib/index.js"></script><script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script><script>var vm = new Vue({el: "#app",name: '',components: {},props: {},data() {return {beginClientX: 0,/*距离屏幕左端距离*/mouseMoveStata: false,/*触发拖动状态 判断*/maxwidth: 258,/*拖动最大宽度，依据滑块宽度算出来的*/confirmWords: '拖动滑块验证',/*滑块文字*/confirmSuccess: false, /*验证成功判断*/}},created() {},watch: {},methods: {mousedownFn: function(e) {this.mouseMoveStata = true;this.beginClientX = e.clientX;}, //按下滑块函数 successFunction() {$(".handler").removeClass('handler_bg').addClass('handler_ok_bg');this.confirmWords = '验证通过'$(".drag").css({'color': '#fff'});$(".drag").css({'background-color': '#13CE66'});$(".handler").css({'left': this.maxwidth});$(".drag_bg").css({'width': this.maxwidth});$('body').unbind('mousemove');$('body').unbind('mouseup');this.confirmSuccess = true;} //验证成功函数 },mounted() {$('body').on('mousemove', (e) => {//拖动，这里需要用箭头函数，不然this的指向不会是vue对象 if(this.mouseMoveStata) {var width = e.clientX - this.beginClientX;if(width > 0 && width <= this.maxwidth) {$(".handler").css({'left': width});$(".drag_bg").css({'width': width});} else if(width > this.maxwidth) {this.successFunction();}}});$('body').on('mouseup', (e) => {//鼠标放开 this.mouseMoveStata = false;var width = e.clientX - this.beginClientX;if(width < this.maxwidth) {$(".handler").css({'left': 0});$(".drag_bg").css({'width': 0});}})}});</script></body></html>复制代码真的是直接复制的mndfs的然后改了一下 www.jianshu.com/p/f5bf9ba0b… 感谢~~~~
转载于:https://juejin.im/post/5bfde978f265da61427398e0