jQuery拖动滑块验证代码

jQuery拖动滑块验证代码

jQuery拖动滑块验证代码

新建html文档。

书写hmtl代码。

书写css代码。

#drag { position: relative; background-color: #e8e8e8; width: 300px; height: 34px; line-height: 34px; text-align: center; }

#drag .handler { position: absolute; top: 0px; left: 0px; width: 40px; height: 32px; border: 1px solid #ccc; cursor: move; }

.handler_bg { background: #fff; }

.handler_ok_bg { background: #fff; }

#drag .drag_bg { background-color: #7ac23c; height: 34px; width: 0px; }

#drag .drag_text { position: absolute; top: 0px; width: 300px; -moz-user-select: none;user-select: none; -o-user-select: none; -ms-user-select: none; }

书写并添加js代码。

代码整体结构。

查看效果。