javascript怎么生成html控件(JavaScript+html实现前端页面滑动验证2)
类别:编程学习 浏览量:2122
时间: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" />
效果如下
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- js如何实现定时器功能(js实现0ms延时定时器的几种方式)
- 在html中使用javascript实例代码(原生 JS+CSS+HTML 实现时序图的方法)
- Extjs msgTarget 提示位置
- 用js做一个计算器(使用JS实现简易计算器)
- js的模块模式设计(如何理解JavaScript模块化)
- php 结果集转json(PHP的JSON封装、转变及输出操作示例)
- js实现商品添加(js实现购物网站放大镜功能)
- js浮点数运算精度问题(JS超出精度数字问题的解决方法)
- nodejs架构解析(详解NodeJS模块化)
- Extjs中FieldSet的收缩和展开
- nodejs格式化教程(nodejs利用readline提示输入内容实例代码)
- js函数对象
- webmaven项目如何启动(js基础语法与maven项目配置教程案例)
- php多维数组怎么转换json(php实现的数组转xml案例分析)
- js中字符串拼接
- Js如何判断浏览器类型和版本
- 八一节,说说中国女兵(八一节说说中国女兵)
- 王治郅菜鸟赛季已让八一带入正轨,大郅七大经典语录或是成功秘诀(王治郅菜鸟赛季已让八一带入正轨)
- 庆八一,重读经典红色语录,感悟互联网发展硬道理(重读经典红色语录)
- TVB新剧《黯夜守护者》将播,陈展鹏陈炜首次合作探讨人性(TVB新剧黯夜守护者将播)
- 新晋小花被称女版吴卓羲 将取代滕丽名成为TVB新一代御用女警(新晋小花被称女版吴卓羲)
- 艺人吴卓羲10年警察生涯,演足10年阿Sir,系咩玩法(艺人吴卓羲10年警察生涯)
热门推荐
- ftp服务器如何设置指定用户访问(FTP 服务器关于权限的问题)
- python如何编写定时器(python 定时器,轮询定时器的实例)
- linux常见命令vmstat(Linux stat命令的使用)
- docker部署带配置的镜像(docker安装fastdfs镜像的一些注意事项)
- sql server事件跟踪器中常用的跟踪事件
- 最低成本搭建云服务器(云服务器搭建难不难?企业云服务器搭建流程)
- 网站服务器需要买哪些设备(选择网站服务器需要注意哪些地方?)
- ASP.NET实现多文件上传
- vnc连接linux黑屏(阿里云服务器VNC无法连接及黑屏的原因)
- 织梦dedecms开启付费授权(织梦Dedecms设置伪静态详细方法)