Drag the slider verification function in Alipay, micro-trust each platform can see such a function, then based on the JS component is how to achieve this function? Today's small set to share the next JS drag the slider verification function implementation code, the specific code as follows:
<! DOCTYPE html> <html> <head> <meta charset= "Utf-8" > <meta http-equiv= "Cache-control" content= " No-cache, No-store, must-revalidate "> <meta http-equiv=" Pragma "content=" No-cache "> <meta http-equiv=" Expires "content=" 0 "> <meta http-equiv=" x-ua-compatible "content=" ie-edge,chrome=1 "> <meta name=" Viewport "content=" Width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no "> < Meta content= "yes" name= "apple-mobile-web-app-capable" > <meta content= "Black" name= " Apple-mobile-web-app-status-bar-style "> <meta content=" telephone=no "name=" format-detection "> <meta Content= "Email=no" name= "format-detection" > <title> drag Slider validation </title> <meta name= "description" Content= "" > <meta name= "keywords" content= "" > <link rel= "stylesheet" type= "Text/css" href= "" > <style > *{margin:0 padding:0} body{font:12px/1.125 Microsoft yahei background: #fff;} ul, li{List-style:noNe } a{text-decoration:none; ani{transition:all. 3s; wrap{width:300px; height:350px; text-align:center
Auto;} . inner{padding:15px; clearfix{overflow:hidden; _zoom:1;} none{display:none;} #slider {position:relative;
Background-color: #e8e8e8; width:300px;height:34px;line-height:34px;text-align:center;} #slider. handler{position:absolute;top:0px;left:0px;width:40px;height:32px;border:1px solid #ccc; cursor:move;}. Handler_bg{background: #fff url ("data:image/png;base64,ivborw0kggoaaaansuheugaaabaaaaaqcayaaaaf8/ 9haaaagxrfwhrtb2z0d2fyzqbbzg9izsbjbwfnzvjlywr5ccllpaaaa3hpvfh0we1momnvbs5hzg9izs54bxaaaaaaadw/ ehbhy2tldcbizwdpbj0i77u/iibpzd0ivzvnme1wq2voauh6cmvtek5uy3pryzlkij8+ Idx4onhtcg1ldgegeg1sbnm6ed0iywrvymu6bnm6bwv0ys8iihg6eg1wdgs9ikfkb2jlifhnucbdb3jliduuns1jmdixidc5lje1ntc3miwgmjaxnc8wms8xm Y0xoto0ndowmcagicagicagij4gphjkzjpsreygeg1sbnm6cmrmpsjodhrwoi8vd3d3lnczlm9yzy8xotk5lzaylziylxjkzi1zew50yxgtbnmjij4gphjkzj Pezxnjcmlwdglvbibyzgy6ywjvdxq9iiigeg1sbnm6eg1wtu09imh0dha6ly9ucy5hzg9izs5jb20vegfwlzeumc9tbs8iihhtbg5zonn0umvmpsjodhrwoi8vbnmuywrvymuuy29tl3hhcc8xljavc1r5cguvumvzb3vyy2vszwyjiib4b Wxuczp4bxa9imh0dha6ly9ucy5hzg9izs5jb20vegfwlzeumc8iihhtce1nok9yawdpbmfsrg9jdw1lbnrjrd0ieg1wlmrpzdo0zdhlnwy5my05nmi0ltrlnw Qtogfjyi03zty4ogyymtu2ztyiihhtce1nokrvy3vtzw50suq9inhtcc5kawq6nteyntvemurgmkvfmtffnei5ndbcmjq2m0exmdq1ouyiihhtce1nokluc3r Hbmnlsuq9inhtcc5pawq6nteyntvemungmkvfmtffnei5ndbcmjq2m0exmdq1ouyiihhtcdpdcmvhdg9yvg9vbd0iqwrvymugughvdg9zag9wiendidiwmtqg Ke1hy2ludg9zackipia8eg1wtu06rgvyaxzlzezyb20gc3rszwy6aw5zdgfuy2vjrd0ieg1wlmlpzdo2mtc5nznmzs02otqxltqyotytytiwni02ndi2ytnko wu5ymuiihn0umvmomrvy3vtzw50suq9inhtcc5kawq6ngq4ztvmotmtotzinc00ztvklthhy2itn2u2odhmmje1nmu2ii8+ idwvcmrmokrlc2nyaxb0aw9upia8l3jkzjpsrey+idwvedp4bxbtzxrhpia8p3hwywnrzxqgzw5kpsjyij8+yirg4aaaalfjrefuenpi/p// pwmlgimbqka9a+bonfsiiboxkcinh+ycacdubyoswaiopxwjciacfegbqz1avbsis5otk/ 8tkmnejwwgqiugtquijwaxuf3yx3xygieiflwhpkyawb+ I1xgswxuligf9a7mqkbwtlhbxaflhgpgqeactkmncu6al9d8wii4hovk3itkwjaxwumloogqhmse45viq2kubuasoyc4wf+ouyxz6mqkgwaan9mirurecxgaaaabjru5erkjggg== ") No-repeat Center; . Handler_ok_bg{background: #fff url ("data:image/png;base64,ivborw0kggoaaaansuheugaaabaaaaaqcayaaaaf8/ 9haaaagxrfwhrtb2z0d2fyzqbbzg9izsbjbwfnzvjlywr5ccllpaaaa3hpvfh0we1momnvbs5hzg9izs54bxaaaaaaadw/ ehbhy2tldcbizwdpbj0i77u/iibpzd0ivzvnme1wq2voauh6cmvtek5uy3pryzlkij8+ Idx4onhtcg1ldgegeg1sbnm6ed0iywrvymu6bnm6bwv0ys8iihg6eg1wdgs9ikfkb2jlifhnucbdb3jliduuns1jmdixidc5lje1ntc3miwgmjaxnc8wms8xm Y0xoto0ndowmcagicagicagij4gphjkzjpsreygeg1sbnm6cmrmpsjodhrwoi8vd3d3lnczlm9yzy8xotk5lzaylziylxjkzi1zew50yxgtbnmjij4gphjkzj Pezxnjcmlwdglvbibyzgy6ywjvdxq9iiigeg1sbnm6eg1wtu09imh0dha6ly9ucy5hzg9izs5jb20vegfwlzeumc9tbs8iihhtbg5zonn0umvmpsjodhrwoi8 Vbnmuywrvymuuy29tl3hhcc8xljavc1r5cguvumvzb3vyy2vszwyjiib4bwxuczp4bxa9imh0dha6ly9ucy5hzg9izs5jb20vegfwlzeumc8iihhtce1nok9y awdpbmfsrg9jdw1lbnrjrd0ieg1wlmrpzdo0zdhlnwy5my05nmi0ltrlnwqtogfjyi03zty4ogyymtu2ztyiihhtce1nokrvy3vtzw50suq9inhtcc5kawq6n dlbrdi3njvgmkq2mtffnei5ndbcmjq2m0exmdq1ouyiihhtce1nOkluc3rhbmnlsuq9inhtcc5pawq6ndlbrdi3njrgmkq2mtffnei5ndbcmjq2m0exmdq1ouyiihhtcdpdcmvhdg9yvg9vbd0iqwrvymugughvdg9zag9wiendi Diwmtqgke1hy2ludg9zackipia8eg1wtu06rgvyaxzlzezyb20gc3rszwy6aw5zdgfuy2vjrd0ieg1wlmlpzdphnwezmwnhmc1hymviltqxnwetytewzs04y2 u5nzrln2q4yteiihn0umvmomrvy3vtzw50suq9inhtcc5kawq6ngq4ztvmotmtotzinc00ztvklthhy2itn2u2odhmmje1nmu2ii8+ idwvcmrmokrlc2nyaxb0aw9upia8l3jkzjpsrey+idwvedp4bxbtzxrhpia8p3hwywnrzxqgzw5kpsjyij8+k+shwwaaaszjrefuenpi/p// pwmykd8uzw+kuodyeyglomivghg/em/pthx0efk9i8waoez+ idupiimy8in1qjwenogj3aco5gnabmbahlgaxa4gq5igannj0mwavtsx7ikyy7l2unujaf+ amamj78aedtbiwgyg5gbifcsxfczoabmcy4a4gojnh0d6dpk4ixnsvihafsdoaelrajrjgjp/awpbhmhejiqnwyrmuznq4vqgdqqxk0ia/ 0i17wjipmqntnbeagmlqiwiqa2vgww7qppbekgxsajiieusbnnsbdweay9mefgmmgbk00e0izta7ahectdq58mrua6wllggfmompig1qfegwaixgzo8guhiys
mwqgsazgwhaezhicizoabkjkqym0caaqdgx279jf50aaaaaabjru5erkjggg== ") No-repeat Center; #slider. Drag_bg{background-color: #7ac23c; height:34px;width:0px;} #slider. 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;} . Unselect{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none; Slide_ok{color: #fff;} </ style> </head> <body> <div class= "wrap" > <div id= "Slider" > <div class= "DRAG_BG" ></ div> <div class= ' drag_text ' onselectstart= ' return false; ' unselectable= ' on ' > Drag slider validation </div> <div class = "Handler handler_bg" ></div> </div> </div> <script> (function (window,document,undefined)
{var dog = {//declares a namespace, or is called an object $:function (ID) {return document.queryselector (ID);}, On:function (El,type,handler) {
El.addeventlistener (Type,handler,false);
}, Off:function (El,type,handler) {El.removeeventlistener (type,handler,false);}}; Encapsulates a slider class function Slider () {var args = arguments[0]; for (var i in args) {this[i] = args[i];//A quick Initialization configuration}//Direct function initialization, representing
The generated instance object executes the initialization this.init (); } Slider.prototype = {Constructor:slideR, Init:function () {this.getdom (); This.dragbar (This.handler);}, Getdom:function () {this.slider = dog.$ (' # ' +this.id);
This.handler = dog.$ ('. Handler ');
this.bg = dog.$ ('. Drag_bg '); }, Dragbar:function (handler) {var that = this, StartX = 0, lastx = 0, doc = document, width = this.slider.offsetWidth, max = Width-handler.offsetwidth, drag = {Down:function (e) {var e = e| |
window.event;
That.slider.classList.add (' unselect ');
StartX = E.clientx-handler.offsetleft;
Console.log (' startx: ' +startx+ ' px ');
Dog.on (Doc, ' MouseMove ', drag.move);
Dog.on (Doc, ' MouseUp ', drag.up);
return false; }, Move:function (e) {var e = e| |
window.event;
LASTX = E.clientx-startx; LASTX = Math.max (0,math.min (MAX,LASTX));
This step means that the distance is greater than 0 less than Max, cleverly written Console.log (' Lastx: ' +lastx+ ' px '); if (Lastx>=max) {handler.classList.add (' handler_ok_bg '); That.slider.classList.add (' Slide_ok '); Dog.off (Handler
, ' MouseDown ', drag.down);
Drag.up ();
} that.bg.style.width = lastx + ' px ';
Handler.style.left = lastx + ' px '; }, Up:function (e) {
var e = e| |
window.event;
That.slider.classList.remove (' unselect ');
if (Lastx < width) {that.bg.classList.add (' ani '); Handler.classList.add (' ani '); that.bg.style.width = 0;
Handler.style.left = 0;
settimeout (function () {that.bg.classList.remove (' ani '); Handler.classList.remove (' ani ');},300);
Dog.off (Doc, ' MouseMove ', drag.move);
Dog.off (Doc, ' MouseUp ', drag.up);
}
};
Dog.on (Handler, ' MouseDown ', drag.down);
}
}; Window. S = window.
Slider = Slider;
}) (window,document);
var defaults = {id: ' Slider '};
New S (defaults); </script> </body> </html>
The above mentioned is a small set of JS components based on the implementation of Drag slider verification function (code sharing), I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
