javascript动画之跟随运动

VIP文章背着吉他的蝙蝠女侠

于 2018-01-01 18:23:25 发布

阅读量265

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/echokkk/article/details/78946542

版权

demo代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>跟随运动</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		body {
			height: 3000px;
		}
		div {
			width: 100px;
			height: 100px;
			background: red;
			border: 1px solid #000;
			position: absolute;
			left: 0;
			top: 0;
		}
	</style>
</head>
<body>
	<div id="box">1</div>
	<script type="text/javascript">
		var box = document.getElementById("box");
		var timer = null;
		var leaderX = 0;
		var leaderY = 0;
		var targetX = 0;
		var targetY = 0;
		// clientX表示的是可视区域距离左边的距离;
		// pageY表示距离浏览器顶端的距离，就相当于document.documentElement.scrollTop(被卷去的部分)加上clientX(可视区域的部分);
		// screentY表示的是距离屏幕顶端的位置
		document.onclick = function(event){
			// console.log(event)

最低0.47元/天解锁文章

背着吉他的蝙蝠女侠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript动画之跟随运动

demo代码如下：跟随运动 * { margin: 0; padding: 0; } body { height: 3000px; } div { width: 100px; height: 100px; background: red; border: 1px solid #000; position: ab
复制链接

扫一扫