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)

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

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

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。

    标签: