js实现拖动（拖拽）验证效果

最新推荐文章于 2023-02-07 18:05:03 发布

能c能v

最新推荐文章于 2023-02-07 18:05:03 发布

阅读量1.2k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_43391160/article/details/104453239

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>拖拽验证</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}

			.box {
				cursor: pointer;
				margin: 50px auto;
				height: 40px;
				width: 300px;
				line-height: 40px;
				text-align: center;
				position: relative;
				background-color: #e8e8e8;
			}

			.rec {
				position: absolute;
				left: 0;
				top: 0;
				width: 0;
				height: 100%;
				background: #00b894;
			}

			.rect {
				position: relative;
				width: 300px;
				height: 100%;
			}

			.silde {
				position: absolute;
				height: 100%;
				width: 40px;
				background: white;
				left: 0;
				border: 1px solid #CCCCCC;
				top: 0;
			}
			.silde img{
				width: 100%;
			}
			a{
				width: 40px;
				height: 100%;
				position: absolute;
				right: 0;
				bottom: 0;
				display: inline-block;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<a></a>
			<div class="rec">
				<div class="rect">
					拖拽验证
					<div class="silde">
						<p>>></p>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
<script type="text/javascript">
	// 获取元素节点
	var box = document.querySelector('.box')
	var rec = document.querySelector('.rec')
	var rect = document.querySelector('.rect')
	var silde = document.querySelector('.silde')
	var p = document.querySelector('p')
	var a = document.querySelector('a')
	// 定义一个X坐标轴的全局变量
	var changeX

	// 点击进行拖拽
	silde.onmousedown = function(e) {
		// 记录点击时的X坐标
		var initX = e.clientX
		console.log(initX)
		// 鼠标移动事件
		document.onmousemove = function(e) {
			// 记录移动时的X坐标
			var moveX = e.clientX
			// 计算差值
			changeX = moveX - initX
			console.log(changeX)
			// 判断差值范围
			if (changeX < 0) {
				changeX = 0
			}
			if (changeX > 260) {
				changeX = 260
				console.log("到底啦")
			}
			silde.style.left = changeX +'px'
			rec.style.width = changeX + 'px'
			if(changeX>=260){
				// 阻止点击和移动事件发生
				document.onmousemove = null
				silde.onmousedown = null
				rec.style.color = 'white'
				rec.innerHTML = '验证成功'
				silde.style.background = '#FF0000'
				a.style.display='block'
				a.innerHTML = '√'
				alert("验证成功")
			}
			document.onmouseup = function(){
				document.onmousemove = null
				if(changeX<260){
					silde.style.left = 0
					rec.style.width = 0
				}
			}

		}
	}
</script>

能c能v

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现拖动（拖拽）验证效果

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>拖拽验证</title> <style type="text/css"> * { margin: 0; padding: 0; box-sizing:...
复制链接

扫一扫