效果预览

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

接下来看代码部分:

代码部分

效果预览
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;}
}

小结

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

前端学习------眼球跟踪效果相关推荐

Web前端学习6个有效果软件，你值得拥有!
想要让程序猿可以快速有效的工作,辅助工具是非常有必要的,不管是刚学习web前端技术的同学还是已经进入工作的学员,都需要学习和掌握一些Web前端开发工具和软件,Web前端学习6个有效果软件,你值得拥有! ...
视觉SLAM前端特征检测与跟踪的思考
点击上方"小白学视觉",选择加"星标"或"置顶" 重磅干货,第一时间送达就目前视觉SLAM的引用来区分,分为基于特征法的和直接法的视觉SL ...
hbuilder前端需要的插件_最新web前端学习路线
随着互联网的深入发展,前端开发工程师已成为市场上极具竞争力的人才.许多学生,包括以前的UI,java,或完全零基础,想学习的前端.下面的思维导图是在互联网上广泛传播的前端学习地图.许多初学者说,当他们 ...
react实战项目_前端学习路线图--从网页设计到项目开发
前端学习路线是螺旋上升的,需要耗费的时间和精力不比其他编程的少,由于其稳健性的特点,使其成为大多数企业开发的刚需编程语言.在网上看到有很多的前端学习路线图,但大部分的前端学习路线图是很零碎的,没有系统 ...
黑马程序员：从零基础到精通的前端学习路线
黑马程序员:从零基础到精通的前端学习路线随着互联网的深入发展,前端开发工程师一跃成为市场上非常抢手的人才.很多同学,包括以前做UI的.Java的.或者对于IT完全零基础的同学都想学习前端.下图是网上 ...
2020年最新前端学习路线
这段日子在 B 站上收到小伙伴最多的要求就是出一个前端学习路线,我能够充分的感受到大家抓耳挠腮加挠墙的迷茫~所以在这里给大家总结了一套前端学习路线.先从初级前端工程师所需的技能开始,然后一路升级到高级 ...
GitHub 上值得前端学习的数据结构与算法项目
Hello,大家好,我是你们的前端章鱼猫. 简介前端章鱼猫从 2016 年加入 GitHub,到现在的 2020 年,快整整 5 个年头了. 相信很多人都没有逛 GitHub 的习惯,因此总会有开 ...
Web前端学习路线分享，初学者不要错过！
在技术岗中,前端开发一直是薪资比较高的岗位. ▲北京前端工程师月均薪20.7K(职友集) 前端技术的更新迭代,导致大部分技术人员跟不上.因此越来越多的人想转型做前端开发了.毕竟想要驰骋职场,想要拿年薪 ...
js怎么在一个div中嵌入另一网站_好程序员web前端学习路线分享HTML5常见面试题集锦一...
好程序员web前端学习路线分享HTML5常见面试题集锦,接下来将会持续为大家分享几篇HTML5常见面试题. 1.布局左边20% 中间自适应右边200px 不能用定位答案:圣杯布局/双飞翼布局或者 ...

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

效果预览

代码部分

html

css

javascript

小结

前端学习------眼球跟踪效果相关推荐

最新文章

热门文章