


Das js-Plug-in implementiert die gemeinsame Nutzung von Bild-Sliding-Verifizierungscodebeispielen
Bildschiebeverifizierungscode, die Logik besteht darin, anhand der Gleitbahn der Maus, der Koordinatenposition, der Berechnung der Widerstandsgeschwindigkeit usw. zu beurteilen, ob es sich um eine menschliche Operation handelt. Natürlich implementiert der folgende Code nur den Front-End-Teil und Zeichnet nur die Schleppkoordinaten auf. Dieser Artikel stellt hauptsächlich das js-Plug-in zur Implementierung des Bild-Slide-Verifizierungscodes und des Sliding-Moduls zur Realisierung der Verifizierungsfunktion vor. Ich hoffe, es kann jedem helfen.
Beginnen wir mit dem Code und erstellen Sie einen Sicherungsdatensatz
jquery.lgymove.js
/** * Created by lgy on 2017/10/21. * 图片验证码 */ (function ($) { $.fn.imgcode = function (options) { //初始化参数 var defaults = { callback:"" //回调函数 }; var opts = $.extend(defaults, options); return this.each(function () { var $this = $(this);//获取当前对象 var html = '<p class="code-k-p">' + '<p class="code_bg"></p>' + '<p class="code-con">' + '<p class="code-img">' + '<p class="code-img-con">' + '<p class="code-mask"><img src="../img/front(1).png"></p>' + '<img src="../img/back(1).png"></p>' + '<p class="code-push"><i class="icon-login-bg icon-w-25 icon-push">刷新</i><span class="code-tip"></span></p>' + '</p>' + '<p class="code-btn">' + '<p class="code-btn-img code-btn-m"></p>' + '<span>按住滑块,拖动完成上方拼图</span>' + '</p></p></p>'; $this.html(html); //定义拖动参数 var $pMove = $(this).find(".code-btn-img"); //拖动按钮 var $pWrap = $(this).find(".code-btn");//鼠标可拖拽区域 var mX = 0, mY = 0;//定义鼠标X轴Y轴 var dX = 0, dY = 0;//定义滑动区域左、上位置 var isDown = false;//mousedown标记 if(document.attachEvent) {//ie的事件监听,拖拽p时禁止选中内容,firefox与chrome已在css中设置过-moz-user-select: none; -webkit-user-select: none; $pMove[0].attachEvent('onselectstart', function() { return false; }); } //按钮拖动事件 $pMove.on({ mousedown: function (e) { //清除提示信息 $this.find(".code-tip").html(""); var event = e || window.event; mX = event.pageX; dX = $pWrap.offset().left; dY = $pWrap.offset().top; isDown = true;//鼠标拖拽启 $(this).addClass("active"); //修改按钮阴影 $pMove.css({"box-shadow":"0 0 8px #666"}); } }); //鼠标点击松手事件 $(document).mouseup(function (e) { var lastX = $this.find(".code-mask").offset().left - dX - 1; isDown = false;//鼠标拖拽启 $pMove.removeClass("active"); //还原按钮阴影 $pMove.css({"box-shadow":"0 0 3px #ccc"}); checkcode(lastX); }); //滑动事件 $pWrap.mousemove(function (event) { var event = event || window.event; var x = event.pageX;//鼠标滑动时的X轴 if (isDown) { if(x>(dX+30) && x<dX+$(this).width()-20){ $pMove.css({"left": (x - dX - 20) + "px"});//p动态位置赋值 $this.find(".code-mask").css({"left": (x - dX-30) + "px"}); } } }); //验证数据 function checkcode(code){ var iscur=false; //模拟ajax setTimeout(function(){ if(iscur){ checkcoderesult(1,"验证通过"); $this.find(".code-k-p").hide(); opts.callback({code:1000,msg:"验证通过",msgcode:"23dfdf123"}); }else{ $pMove.addClass("error"); checkcoderesult(0,"验证不通过"); opts.callback({code:1001,msg:"验证不通过"}); setTimeout(function() { $pMove.removeClass("error"); $this.find(".code-mask").animate({"left":"0px"},200); $pMove.animate({"left": "10px"},200); },400); } },500) } //验证结果 function checkcoderesult(i,txt){ if(i==0){ $this.find(".code-tip").addClass("code-tip-red"); }else{ $this.find(".code-tip").addClass("code-tip-green"); } $this.find(".code-tip").html(txt); } }) } })(jQuery);
CSS-Teil:
.code_bg{ position: fixed; top:0; left: 0; right:0; bottom:0; background-color: rgba(0,0,0,.5); z-index: 99; } .icon-login-bg{ background-image: url(../img/icon/loginicon.png); background-repeat: no-repeat; } .code-con{ position: absolute; top:100px; width: 320px; left: 50%; margin-left: -160px; background-color: #fff; z-index: 100; -moz-user-select: none; -webkit-user-select: none; } .code-img{ margin: 5px 5px; padding: 5px 5px; background-color: #f5f6f7; } .code-img img{ display: block; } .icon-w-25{ display: inline-block; width: 25px; height: 25px; text-indent: -9999px; } .icon-push{ cursor: pointer; background-position: -149px -95px; } .code-push{ height: 25px; } .code-btn{ position: relative; height: 30px; text-align: center; color: #999; margin: 10px 10px; box-sizing: border-box; background-color: #f5f6f7; border-radius: 15px; border: 1px solid #e1e1e1; } .code-btn-m{ position: absolute; width: 40px; height: 40px; border-radius: 50%; background-color: #f5f6f7; border: 1px solid #e1e1e1; z-index: 5; top:-8px; left: 10px; box-shadow: 0 0 3px #ccc; cursor: pointer; background-position: -63px 10px; } .code-btn-img{ background-image:url(../img/icon/codejt.png); background-repeat: no-repeat; } .code-btn-img.active{ background-position: -134px 10px; } .code-btn-img.error{ background-position: 8px 10px; } .code-img-con{ position: relative; } .code-mask{ position: absolute; top:0; left: 0; z-index: 10; } .code-tip{ padding-left: 10px; font-size: 12px; color: #999; } .code-tip-red{ color: red; } .code-tip-green{ color: green; }
HTML-Teil:
<p id="imgscode"></p> <script> $("#imgscode").imgcode(); </script>
Rendering:
Ich hoffe, es kann jedem helfen, basierend auf Die oben genannten Ideen können Sie selbst ausprobieren.
Verwandte Empfehlungen:
Mobil Telefon-Countdown-Funktion zum Senden eines Bestätigungscodes bei der Registrierung
So verwenden Sie PHP zum Senden eines SMS-Bestätigungscodes
Das obige ist der detaillierte Inhalt vonDas js-Plug-in implementiert die gemeinsame Nutzung von Bild-Sliding-Verifizierungscodebeispielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Normalerweise erhalten wir PDF-Dateien von der Regierung oder anderen Behörden, teilweise mit digitalen Signaturen. Nach der Überprüfung der Signatur sehen wir die Meldung SignatureValid und ein grünes Häkchen. Wenn die Signatur nicht überprüft wird, ist die Gültigkeit unbekannt. Die Überprüfung von Signaturen ist wichtig. Sehen wir uns an, wie das im PDF-Format geht. So überprüfen Sie Signaturen im PDF-Format. Durch die Überprüfung von Signaturen im PDF-Format wird das Dokument vertrauenswürdiger und die Wahrscheinlichkeit erhöht, dass es akzeptiert wird. Sie können Signaturen in PDF-Dokumenten auf folgende Weise überprüfen. Öffnen Sie die PDF-Datei im Adobe Reader. Klicken Sie mit der rechten Maustaste auf die Signatur und wählen Sie „Signatureigenschaften anzeigen“. Klicken Sie auf die Schaltfläche „Unterzeichnerzertifikat anzeigen“. Fügen Sie die Signatur auf der Registerkarte „Vertrauen“ zur Liste „Vertrauenswürdige Zertifikate“ hinzu. Klicken Sie auf „Signatur überprüfen“, um die Überprüfung abzuschließen

1. Klicken Sie nach dem Öffnen von WeChat auf das Suchsymbol, geben Sie das WeChat-Team ein und klicken Sie zum Betreten auf den Dienst unten. 2. Klicken Sie nach der Eingabe auf die Option „Self-Service-Tool“ in der unteren linken Ecke. 3. Klicken Sie nach dem Anklicken in den Optionen oben auf die Option zum Entsperren/Einspruch für eine zusätzliche Verifizierung.

So implementieren Sie mit WebSocket und JavaScript ein Online-Spracherkennungssystem. Einführung: Mit der kontinuierlichen Weiterentwicklung der Technologie ist die Spracherkennungstechnologie zu einem wichtigen Bestandteil des Bereichs der künstlichen Intelligenz geworden. Das auf WebSocket und JavaScript basierende Online-Spracherkennungssystem zeichnet sich durch geringe Latenz, Echtzeit und plattformübergreifende Eigenschaften aus und hat sich zu einer weit verbreiteten Lösung entwickelt. In diesem Artikel wird erläutert, wie Sie mit WebSocket und JavaScript ein Online-Spracherkennungssystem implementieren.

PHP8 ist die neueste Version von PHP und bietet Programmierern mehr Komfort und Funktionalität. Bei dieser Version liegt ein besonderer Schwerpunkt auf Sicherheit und Leistung, und eine der bemerkenswerten neuen Funktionen ist die Hinzufügung von Verifizierungs- und Signierungsfunktionen. In diesem Artikel werfen wir einen genaueren Blick auf diese neuen Funktionen und ihre Verwendung. Verifizierung und Signierung sind sehr wichtige Sicherheitskonzepte in der Informatik. Sie dienen häufig dazu, sicherzustellen, dass die übermittelten Daten vollständig und authentisch sind. Verifizierung und Signaturen werden beim Umgang mit Online-Transaktionen und sensiblen Informationen noch wichtiger, denn wenn jemand in der Lage ist, die Daten zu manipulieren, könnte dies möglicherweise der Fall sein

WebSocket und JavaScript: Schlüsseltechnologien zur Realisierung von Echtzeit-Überwachungssystemen Einführung: Mit der rasanten Entwicklung der Internet-Technologie wurden Echtzeit-Überwachungssysteme in verschiedenen Bereichen weit verbreitet eingesetzt. Eine der Schlüsseltechnologien zur Erzielung einer Echtzeitüberwachung ist die Kombination von WebSocket und JavaScript. In diesem Artikel wird die Anwendung von WebSocket und JavaScript in Echtzeitüberwachungssystemen vorgestellt, Codebeispiele gegeben und deren Implementierungsprinzipien ausführlich erläutert. 1. WebSocket-Technologie

So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript. Im heutigen digitalen Zeitalter müssen immer mehr Unternehmen und Dienste Online-Reservierungsfunktionen bereitstellen. Es ist von entscheidender Bedeutung, ein effizientes Online-Reservierungssystem in Echtzeit zu implementieren. In diesem Artikel wird erläutert, wie Sie mit WebSocket und JavaScript ein Online-Reservierungssystem implementieren, und es werden spezifische Codebeispiele bereitgestellt. 1. Was ist WebSocket? WebSocket ist eine Vollduplex-Methode für eine einzelne TCP-Verbindung.

Einführung in die Verwendung von JavaScript und WebSocket zur Implementierung eines Online-Bestellsystems in Echtzeit: Mit der Popularität des Internets und dem Fortschritt der Technologie haben immer mehr Restaurants damit begonnen, Online-Bestelldienste anzubieten. Um ein Echtzeit-Online-Bestellsystem zu implementieren, können wir JavaScript und WebSocket-Technologie verwenden. WebSocket ist ein Vollduplex-Kommunikationsprotokoll, das auf dem TCP-Protokoll basiert und eine bidirektionale Kommunikation zwischen Client und Server in Echtzeit realisieren kann. Im Echtzeit-Online-Bestellsystem, wenn der Benutzer Gerichte auswählt und eine Bestellung aufgibt

Steam ist eine Plattform, die von Spielebegeisterten verwendet wird. In letzter Zeit sind jedoch viele Benutzer bei der Anmeldung bei Steam in der Benutzeroberfläche für mobile Token steckengeblieben und können sich nicht erfolgreich anmelden Wissen Sie, wie Sie diese Situation lösen können. Das heutige Software-Tutorial ist hier, um die Fragen zu beantworten, damit Benutzer in Not die Bedienungsmethoden ausprobieren können. Fehler beim mobilen Steam-Token? Lösung 1: Suchen Sie bei Softwareproblemen zunächst die Steam-Softwareeinstellungen auf dem Mobiltelefon, fordern Sie Hilfe an und bestätigen Sie, dass das Netzwerk, das das Gerät verwendet, normal funktioniert. Klicken Sie erneut auf OK, klicken Sie auf SMS senden. Sie können den Bestätigungscode auf der erhalten Handy-Seite, und Sie sind fertig, wenn Sie eine Anfrage bearbeiten
