原生js实现拖动滑块进行验证效果代码
代码语言:html
所属分类:验证
代码描述:原生js实现拖动滑块进行验证效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .verify { width: 280px; height: 40px; margin-top: 30px; } .verify span { width: 38px; height: 40px; font-family: MicrosoftYaHei; font-size: 16px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: 40px; letter-spacing: 0px; color: #302f41; margin-right: 23px; } #verify_box { width: 240px; height: 40px; text-align: center; line-height: 40px; font-size: 14px; color: #fff; position: relative; background-color: rgba(212, 212, 212, 1); top: -40px; right: -49px; } #verify_xbox { width: 54px; height: 40px; text-align: center; line-height: 40px; font-size: 14px; color: #fff; position: absolute; background: #7BBB55; } #btn { cursor: pointer; width: 54px; height: 40px; background-color: rgba(255, 255, 255, 1); border: solid 1px rgba(212, 212, 212, 1); float: right; } .continue { width: 120px; height: 40px; background-color: rgba(212, 212, 212, 1); margin: 0 70px; border: none; color: #302f41; font-size: 16px; } .continue:hover { background-color: rgba(235, 54, 38, 1); color: #ffffff; } img { max-width: 100%; } </style> </head> <body> <div class="verify"> <span>验证:</span> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0