Js-动态边框容器触碰边缘弹回

最新推荐文章于 2021-03-23 16:26:32 发布

keyuzhang

最新推荐文章于 2021-03-23 16:26:32 发布

阅读量713

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/keyuzhang/article/details/89342768

版权

Javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<script type="text/javascript" src="../recourse/jQuery/jquery-2.2.3.min.js"></script>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		div{
			width: 100px;
			height: 100px;
			background-color: red;
		}
	</style>
</head>
<body>
	<div></div>
	<script type="text/javascript">
		iw = $("div").width();
		ih = $("div").height();
		ws = 0;
		hs = 0;
		screenw = $(window).width();
		screenh = $(window).height();
		cw = screenw - iw;
		ch = screenh - ih;
		// screenw=document.documentElement.clientHeight;
		wss = 1;
		hss = 1;
		setInterval(function() {
			ws += wss;
			hs += hss;
			if (hs > ch) {
				hs = ch;
				hss = -hss;
			}
			if (hs <= 0) {
				hss = -hss;
			}
			if (ws > cw) {
				ws = cw;
				wss = -wss;
			}
			if (ws <= 0) {
				wss = -wss;
			}
			$("div").css("margin-left", ws + "px")
			$("div").css("margin-top", hs + "px")
		}, 4)
	</script>
</body>
</html>