javascript怎么生成html控件（JavaScript+html实现前端页面滑动验证2）

时间：2022-01-15 01:07:53类别：编程学习

javascript怎么生成html控件

JavaScript+html实现前端页面滑动验证2

本文实例为大家分享了炫酷的前端页面滑动验证的具体代码，供大家参考，具体内容如下

分享炫酷的前端页面滑动验证

前面已经发过一种，这里再发一种，只是特效不一样

还是直接上代码：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <style>
        /* 滑动控件容器,灰色背景 */
        #dragContainer {
            position: relative;
            display: inline-block;
            background: #e8e8e8;
            width: 300px;
            height: 33px;
            border: 2px solid #e8e8e8;
        }
        /* 滑块左边部分,绿色背景 */
        #dragBg {
            position: absolute;
            background-color: #7ac23c;
            width: 0px;
            height: 100%;
        }
        /* 滑动验证容器文本 */
        #dragText {
            position: absolute;
            width: 100%;
            height: 100%;
            /* 文字水平居中 */
            text-align: center;
            /* 文字垂直居中,这里不能用百分比,因为百分比是相对原始line-height的,而非li高度 */
            line-height: 33px;
            /* 文本不允许选中 */
            user-select: none;
            -webkit-user-select: none;
        }
        /* 滑块 */
        #dragHandler {
            position: absolute;
            width: 40px;
            height: 100%;
            cursor: move;
        }
        /* 滑块初始背景 */
        .dragHandlerBg {
            background: #fff no-repeat center url("data:image.jpg" alt="javascript怎么生成html控件（JavaScript+html实现前端页面滑动验证2）" border="0" />

效果如下

javascript怎么生成html控件（JavaScript+html实现前端页面滑动验证2）