65-前端利用js实现页面左右滑动切换页面

最新推荐文章于 2024-08-21 15:33:15 发布

ystraw_ah

最新推荐文章于 2024-08-21 15:33:15 发布

阅读量4.2k

点赞数 2

分类专栏： javaweb

本文链接：https://blog.csdn.net/qq_39451578/article/details/102875241

版权

javaweb 专栏收录该内容

65 篇文章 1 订阅

订阅专栏

主要利用js的鼠标按键按下和抬起两个监听函数即可实现，请看下面的例子。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#test{width: 300; height:300; background-color: red;}
		</style>
	</head>
	<script language="JavaScript">
		var startX = 0; //全局变量, 记录鼠标按下的横坐标
		// 按下鼠标
		function mousedown(event) {
			var e = window.event;
			var obj = e.srcElement;
			obj.style.color = 'blue';
			startX = e.clientX;
		}
 		// 抬起鼠标
		function mouseup(event) {
			var e = window.event;
			var obj = e.srcElement;
			obj.style.color = 'black';
			var endX = e.clientX;
			// 左滑
			if((startX - endX)>70){
				window.location.href="http://www.baidu.com";
				console.log('左：e: '+ endX + ', s: ' + startX)	
			}
			// 右滑
			if((endX - startX)>70){
				window.location.href="http://www.qq.com";
				console.log('右：e: '+ endX + ', s: ' + startX)	
			}
		}
	</script>
 
	<body>
		<p id="test" style="color: green;" onmousedown="mousedown()" onmouseup="mouseup()">测试</p>
	</body>
 
</html>