前端学习------眼球跟踪效果

最新推荐文章于 2024-06-02 09:40:32 发布

Mr.Li_李大侠

最新推荐文章于 2024-06-02 09:40:32 发布

阅读量2.1k

点赞数 5

文章标签： css html js javascript

本文链接：https://blog.csdn.net/qq_45452418/article/details/104254037

版权

效果预览

眼球的移动，是通过获取鼠标在相对于浏览器页面的实时位置，做出的相应位置的改变。
废话不多说先看效果！
效果图
接下来看代码部分:

代码部分

效果预览
html
css
javascript
小结

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<link type="text/css" rel="stylesheet" href="css/css.css">
	<body>
		<div class="eyes">
			<div class="eye">
				<div class="ball"></div>
			</div>
			<div class="eye">
				<div class="ball"></div>
			</div>
		</div>
		<script src="js/js.js"></script>
	</body>
</html>

css

body{
	margin:0;
	padding: 0;
	background-color: #4B0082;
}
.eyes{
	position: absolute;
	top:50%;
	transform: translateY(-50%);
	color: aliceblue;
	width:100%;
	text-align: center;
	
}
.eye{
	background: white;
	height: 120px;
	width:240px;
	display:inline-block;
	margin:40px;
	border-radius:50% ;
	position: relative;
	overflow: hidden;
}
.ball{
	background: black;
	width:40px;
	height:40px;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	position: absolute;
	border-radius:50%;
	border:15px solid #333;
}

javascript

var balls = document.getElementsByClassName("ball");
document.onmousemove = function(){
	var x = event.clientX * 100 / window.innerWidth + "%";
	var y = event.clientY * 100 / window.innerHeight + "%";
	//获取鼠标坐标(x,y)
	for(var i=0;i<2;i++){
		balls[i].style.left = x;
		balls[i].style.top = y;
	}
}

小结

有什么比眼球能跟踪还兴奋的事！（在这个百无聊赖的时期里。。。）

Mr.Li_李大侠

关注

5
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
前端学习------眼球跟踪效果

眼球的移动，是通过获取鼠标的实时位置，做出的相应位置的改变。废话不多说先看效果！接下来看代码:前端学习------眼球跟踪效果htmlcssjavascripthtml<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title&g...
复制链接

扫一扫