JS implementation of sliding puzzle verification code

JS implementation of sliding puzzle verification code, I this style is imitation of those big web site did, learning with, only used to the front. Small personal web site feel can also be used, the larger the others use a machine to crack.

Here's a look at the illustration:

It's like that.

The source is here.

Baidu Network disk: Link: https://pan.baidu.com/s/1htjxYBE Password: m5aw

3.9MB is because most of it is a picture

Using the sample code, there are

JS Source

(function(window, document) {varSliderbar =function(Targetdom, options) {//whether the judgment was created with a function or created with new. This allows us to use the plugin via Maskshare ("Dom") or New Maskshare ("Dom").        if(! ( This instanceofSliderbar))return NewSliderbar (targetdom, Options); //Parameters         This. options = This. Extend ({dataList: []}, Options); //Get Dom         This. Targetdom =document.getElementById (targetdom); varDataList = This. options.datalist; if(Datalist.length > 0) {            var html = "<div class= ' slide-box ' ><div class= ' slide-img-block ' >" + "<div class= ' slide-loading ' ></div><div class= ' slide-img-border ' > ' + ' <div class= ' scroll-background slide-top ' >&lt ;/div><div class= ' slide-img-div ' > "+" <div class= ' slide-img-nopadding ' > "+" <div class= ' slide-block ' id= ' slideblock ' ></div><div clas s= ' Slide-box-shadow ' id= ' cutblock ' ></div></div> ' + ' <div class= ' Scroll-background slide- Img-hint-info ' id= ' slidehintinfo ' > ' + ' <div class= ' slide-img-hint ' ><div class= ' Scroll-backgroun D slide-icon ' id= ' Slideicon ' ></div> "+" <div class= ' slide-text ' ><span class= ' slide-text-t Ype ' id= ' slidetype ' ></span> ' + ' <span class= ' slide-text-content ' id= ' slidecontent ' ></span ></div></div></div></div> "+" <div class= ' scroll-background slide-bottom ' > "+" <  Div class= ' scroll-background slide-bottom-refresh ' id= ' refreshbtn ' title= ' change picture ' ></div> ' + ' <div class= ' Slide-bottom-no-logo ' ></div></div></div></div> ' + ' <div class= ' scroll -background Scroll-bar ' > ' + ' <div class= ' scroll-background slide-btn ' id= ' slidebtn ' ></div> ' + "<div class= ' slide-title ' id= ' slidehint ' > <-hold the slider, drag to complete the top puzzle </div></div></div>";  This. targetdom.innerhtml =html;  This. slidebtn = document.getElementById ("slidebtn");//Drag button             This. refreshbtn = document.getElementById ("refreshbtn");//Change Chart Button             This. Slidehint = document.getElementById ("Slidehint");//Hint name             This. slideimg = document.getElementById ("slideimg");//Image             This. Cutblock = document.getElementById ("Cutblock");//Crop Area             This. Slideblock = document.getElementById ("Slideblock");//cropped picture             This. Slideicon = document.getElementById ("Slideicon");//the correct, failed icon             This. Slidetype = document.getElementById ("Slidetype");//Right, failure             This. slidecontent = document.getElementById ("slidecontent");//the correct, failed body             This. Slidehintinfo = document.getElementById ("Slidehintinfo");//Popup             This. Resultx = 0;  This. StartX = 0;  This. Timer = 0;  This. Starttamp = 0;  This. Endtamp = 0;  This. x = 0;  This. ImgWidth = 0;  This. ImgHeight = 0;  This. imglist = [];  This. issuccess =true;  for(vari = 1; I < 10; i++) {                 This. Imglist.push (i + ". jpg"); }        }         This. Init (); } Sliderbar.prototype={init:function () {             This. event (); }, Extend:function(obj, obj2) { for(varKinchobj2) {Obj[k]=Obj2[k]; }            returnobj; }, Event:function () {            var_this = This;            _this.retonewimg (); _this.slidebtn.onmousedown=function(event) {_this.mousedown (_this, event); } _this.refreshbtn.onclick=function() {_this.refreshbtnclick (_this); }}, Refreshbtnclick:function(_this) {_this.issuccess=true; _this.slideblock.style.csstext= ""; _this.cutblock.style.csstext= "";        _this.retonewimg (); }, Retonewimg:function () {            var_this = This; varindex = Math.Round (Math.random () * 8);//This method has a condition equal to 0            varIMGSRC = "./images/" + _this.imglist[index] + ""; _this.slideimg.setattribute ("SRC", IMGSRC); _this.slideblock.style.backgroundimage= "url (" + imgsrc + ")"; _this.slideimg.onload=function(e) {e.stoppropagation (); _this.imgwidth= _this.slideimg.offsetwidth;//Picture Width_this.imgheight = _this.slideimg.offsetheight;//Picture High}}, Cutimg:function () {            var_this = This; _this.cutblock.style.display= "Block"; varCutwidth = _this.cutblock.offsetwidth;//Crop area width            varCutheight = _this.cutblock.offsetheight;//High Clipping area            // Left_this.resultx = Math.floor (Math.random () * (_this.imgwidth-cutwidth * 2-4) +cutwidth); //Top            varCuttop = Math.floor (Math.random () * (_this.imgheight-cutheight * 2) +cutheight); //Set Style_this.cutblock.style.csstext = "Top:" + cuttop + "px;" + "Left:" + _this.resultx + "PX; Display:block; "; _this.slideblock.style.top= Cuttop + "px"; _this.slideblock.style.backgroundposition= "-" + _this.resultx + "px-" + cuttop + "px"; _this.slideblock.style.opacity= "1"; }, MouseDown:function(_this, E) {e.preventdefault (); _this.startx=E.clientx; _this.starttamp= (NewDate ()). ValueOf (); vartarget =E.target; Target.style.backgroundPosition= "0-216PX"; _this.slidehint.style.opacity= "0"; if(_this.issuccess) {_this.cutimg (); } document.addeventlistener (' MouseMove ', MouseMove); Document.addeventlistener (' MouseUp ', MouseUp); //dragging            functionMouseMove (event) {_this.x= Event.clientx-_this.startx; if(_this.x < 0) {_this.slidebtn.style.left= "0px"; _this.slideblock.style.left= "2px"; } Else if(_this.x >= 0 && _this.x <= 217) {_this.slidebtn.style.left= _this.x + "px"; _this.slideblock.style.left= _this.x + "px"; } Else{_this.slidebtn.style.left= "217PX"; _this.slideblock.style.left= "217PX"; } _this.slidebtn.style.transition= "None"; _this.slideblock.style.transition= "None";            }; //Mouse Release            functionMouseUp () {Document.removeeventlistener (' MouseMove ', MouseMove); Document.removeeventlistener (' MouseUp ', MouseUp); varleft =_this.slideblock.style.left; Left= parseint (left.substring (0, Left.length-2)); if(_this.resultx > (left-2) && _this.resultx < (left + 2)) ) {_this.issuccess=true; _this.endtamp= (NewDate ()). ValueOf (); _this.timer= ((_this.endtamp-_this.starttamp)/+). ToFixed (1); //crop a picture (piece of puzzle)_this.slideblock.style.opacity = "0"; _this.slideblock.style.transition= "Opacity 0.6s"; //cropped area (that piece of black and black)_this.cutblock.style.opacity = "0"; _this.cutblock.style.transition= "Opacity 0.6s"; //correctly pop-up icons_this.slideicon.style.backgroundposition = "0-1207PX"; _this.slidetype.classname= "Slide-text-type Greencolor"; _this.slidetype.innerhtml= "Verify by:"; _this.slidecontent.innerhtml= "Spents" + _this.timer + "s"; SetTimeout (function() {_this.cutblock.style.display= "None"; _this.slideblock.style.left= "2px";                    _this.retonewimg (); }, 600); _this.options.success&&_this.options.success (); }Else{_this.issuccess=false; //Set Style                    //crop a picture (piece of puzzle)_this.slideblock.style.left = "2px"; _this.slideblock.style.transition= "Left 0.6s"; //error pop-up icon_this.slideicon.style.backgroundposition = "0-1229px"; _this.slidetype.classname= "Slide-text-type Redcolor"; _this.slidetype.innerhtml= "Validation failed:"; _this.slidecontent.innerhtml= "Drag the slider to flatten the hover image properly"; _this.options.fail&&_this.options.fail (); }                //Set Style_this.slidehintinfo.style.height = "22px"; SetTimeout (function() {_this.slidehintinfo.style.height= "0px"; }, 1300); _this.slidebtn.style.backgroundposition= "0-84PX"; _this.slidebtn.style.left= "0"; _this.slidebtn.style.transition= "Left 0.6s"; _this.slidehint.style.opacity= "1"; }}} window. Sliderbar=Sliderbar;} (window, document));

CSS won't let go.

Others have the same bump as the puzzle, that I really do not know how to get it.

JS implementation of sliding puzzle verification code