jQuery验证码插件

1、准备好需要用到的图标。

2、新建html文档。

3、书写hmtl代码。

h1>verify</h1>

纯前端的验证码插件

<br>

<br>

<h3>普通验证码</h3>

<div id="mpanel2" > </div>

<button type="button" id="check-btn" class="verify-btn">确定</button>

<div id="mpanel3" style="margin-top: 20px"> </div>

<button type="button" id="check-btn2" class="verify-btn">确定</button>

<h3>滑动验证码</h3>

<div id="mpanel1" > </div>

<div id="mpanel4" style="margin-top:50px;"> </div>

<h3>点选验证码</h3>

<div id="mpanel5" style="margin-top:50px;"> </div>

<div id="mpanel6" style="margin-top:50px;"> </div>

4、书写css代码。

.verify-code { font-size: 20px; text-align: center; cursor: pointer; margin-bottom: 5px; border: 1px solid #ddd; }

.cerify-code-panel { height: 100%; overflow: hidden; }

.verify-code-area { float: left; }

.verify-input-area { float: left; width: 60%; padding-right: 10px; }

.verify-change-area { line-height: 30px; float: left; }

.varify-input-code { display: inline-block; width: 100%; height: 25px; }

.verify-change-code { color: #337AB7; cursor: pointer; }

.verify-btn { width: 200px; height: 30px; background-color: #337AB7; color: #FFFFFF; border: none; margin-top: 10px; }

/*滑动验证码*/

.verify-bar-area { position: relative; background: #FFFFFF; text-align: center; -web  kit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; border: 1px solid #ddd; -web  kit-border-radius: 4px; }

.verify-bar-area .verify-move-block { position: absolute; top: 0px; left: 0; background: #fff; cursor: pointer; -web  kit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; box-shadow: 0 0 2px #888888; -web  kit-border-radius: 1px; }

.verify-bar-area .verify-move-block:hover { background-color: #337ab7; color: #FFFFFF; }

.verify-bar-area .verify-left-bar { position: absolute; top: -1px; left: -1px; background: #f0fff0; cursor: pointer; -web  kit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; border: 1px solid #ddd; }

.verify-img-panel { margin: 0; -web  kit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; border: 1px solid #ddd; border-radius: 3px; position: relative; }

.verify-img-panel .verify-refresh { width: 25px; height: 25px; text-align: center; padding: 5px; cursor: pointer; position: absolute; top: 0; right: 0; z-index: 2; }

.verify-img-panel .icon-refresh { font-size: 20px; color: #fff; }

.verify-img-panel .verify-gap { background-color: #fff; position: relative; z-index: 2; border: 1px solid #fff; }

.verify-bar-area .verify-move-block .verify-sub-block { position: absolute; text-align: center; z-index: 3; border: 1px solid #fff; }

.verify-bar-area .verify-move-block .verify-icon { font-size: 18px; }

.verify-bar-area .verify-msg { z-index : 3; }

5、书写并添加js代码。

<script src="js/jquery.min.js"></script> 

<script src="js/verify.js" ></script> 

6、代码整体结构。

7、查看效果。