前端JS——滑动滑块验证登录（源码及效果）

最新推荐文章于 2025-06-26 11:17:56 发布

原创

最新推荐文章于 2025-06-26 11:17:56 发布 · 1.7w 阅读

48 ·

CC 4.0 BY-SA版权

文章标签：

#js #前端 #滑块 #验证

1.html代码

<div class="box">
			<!--滑块-->
			<a href="#"><div class="btn">>></div></a>
			<!--文字-->
			<p class="text">拖动滑块验证</p>
			<!--背景-->
			<div class="bg"></div>			
</div>

2.css样式

最大的盒子相对定位,其他内部内容绝对定位
需要根据层级设置z-index保证滑动的正常使用

.box{
	position: relative;
	width: 300px;
	height: 34px;
	background: #e8e8e8;
	border-radius: 4px;
	left: 20px;
}
.btn{
	position: absolute;
	top: 0;
	width: 40px;
	height:32px;
	text-align: center;
	line-height: 32px;
	border-radius: 4px;
	z-index: 3;
	background-color: #fff;
	border: 1px solid #ccc;
	color: black;
}
.text{
	position: absolute;
	width: 100%;
	margin: 0;
	text-align: center;
	line-height: 34px;
	display: block;
	z-index: 2;
	/*-webkit-margin-before: 1em;
	-webkit-margin-after: 1em;*/
}
.bg{
	position: absolute;
	height: 100%;
	background-color: yellowg