原生滑动验证

Perfect

这是一个🌰

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style type="text/css">
			#sls-silder {
				width: 1000px;
				height: 50px;
				border-radius: 5px;
				background-color: #eee;
				position: relative;
			}

			#sls-silder-btn {
				position: absolute;
				transform: translate(0, -50%);
				left: 0;
				top: 50%;
				height: 30px;
				width: 30px;
				border-radius: 50%;
				background-color: greenyellow;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div id="sls-silder">
			<div id="sls-silder-btn"></div>
		</div>
		<script type="text/javascript">
			let silder = document.getElementById('sls-silder');
			let btn = document.getElementById('sls-silder-btn');
			let wapperWidth = 1000; //父容器的宽度
			let btnWidth = 30; //按钮宽度
			let wapperPadding = 0 ; //父容器的内边距
			let go = false;
			let numb = 0;
			btn.onmousedown = function(res) {
				go = true;
			}
			btn.onmouseup = function(res) {
				go = false
			};
			silder.addEventListener('mousemove', res => {
				if (go && res.pageX < wapperWidth && res.pageX > btnWidth) {
						numb = res.pageX - btnWidth;
						console.log(res.pageX)
						btn.style = `left:${numb}px`;
				}
			})
		</script>
	</body>
</html>
posted @ 2021-05-19 09:32  小泽沐优声  阅读(39)  评论(0)  编辑  收藏  举报