百度招聘页面的背景，那个可跟鼠标移动的星空背景是怎么做的啊
http://talent.baidu.com/external/baidu/index.html#/
这是地址，点开以后，那个背景可以根据你鼠标的移动而变化，打开f12，找了半天元素没弄明白，我刚接受前端，对这个东西好奇又无知，希望有大神能解答一下。谢谢。
展开
收起
1
条回答
写回答
写回答
-
IT从业随便浏览了一下百度的源码（那个在homeView.js里的），大致实现的过程是：
1.先看看浏览器支持Canvas不支持，如果支持就创建一个Canvas元素，然后画上几百个点，不支持就创建一个DIV往里扔几百个img元素，创建的时候根据规则设置了点到观察者的假想距离（影响后面的移动速度计算），并且点有大有小；
2.监视mousemove事件，不停地更新一个鼠标位置对象，此对象用于后面的计算；
3.搞一个1000/30毫秒周期的计时器，每个周期内计算各点的当前坐标，并重画Canvas或者调整img元素的位置；
4.每个点的目标位置通过观察者（鼠标）的坐标计算得出，点在画布上的移动速度用点到观察者的假想距离计算出来，近的点移动快，远的点移动慢，这样有3D层次感；
5.每个点的实际位置根据上一帧的实际位置和目标位置还有移动速度计算得出，这个计算结果用于第3步的重画步骤。
2019-07-17 19:28:25赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
