判断鼠标的左右移动

最新推荐文章于 2024-05-29 13:45:07 发布

荒古遗尘

最新推荐文章于 2024-05-29 13:45:07 发布

阅读量2.1k

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/weixin_42063881/article/details/88862974

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

判断鼠标的左右移动

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="./css/index.css">
</head>
<body>
	<div class="slide col-lg-5">
		<button type="button" class="btn">滑动</button>
	</div>
	<script type="text/javascript" src="./js/jquery.min.js"></script>
	<script type="text/javascript" src="./js/bootstrap.min.js"></script>
	<script type="text/javascript">
		// 滑动效果
		$(".btn").mousedown((e)=>{
		    e.preventDefault();
		    startX=e.pageX;//点击时鼠标的位置
		    startY=e.pageY;
		    let dis;
		    $(document).mousemove((e)=>{
		        e.preventDefault();
		        moveEndX=e.pageX;//移动是鼠标的位置
		        moveEndY=e.pageY;
		        //标签鼠标的位置
		        $('.btn').css('left',moveEndX-10)
		        //元素的下标位置
		        dis - e.clientX>0?console.log('向左移'):console.log('向右移')
		        dis = e.clientX

		    })
		    $(document).on('mouseup',()=>{
				$(document).off('mousemove');
			})
		})
	</script>
</body>
</html>

dis=e.clientX必须写在判断下边

荒古遗尘

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
判断鼠标的左右移动

判断鼠标的左右移动<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="./css/bootstrap....
复制链接

扫一扫