资讯专栏INFORMATION COLUMN

JavaScript实现 满天星 导航栏

weizx / 684人阅读

摘要:说明分享一个满天星导航栏的效果,代码不多,但效果挺好看,先看看效果图吧。解释实现这个效果,需要掌握的知识不用很多,知道简单的,会用获取元素,能绑定事件基本就足够了。

说明

分享一个满天星导航栏的效果,代码不多,但效果挺好看,先看看效果图吧。

解释

实现这个效果,需要掌握的知识不用很多,知道简单的CSS,会用JS 获取元素, 能绑定事件基本就足够了。
好的,我们直接来看代码,注释已经写的很详细了,不想看有注释的,点这里。



 
  
  
 
 
        

 

注意:如果需要修改样式,不要把 nav元素 和 nav 里面的 li元素,给定位了,因为最后线的位置是根据 a元素的 offsetHeight 和 offsetLeft 定位的,如果 nav元素 和 nav 里面的 li元素 定位了,会改变 a元素的offsetParent元素,位置就不对了。
对offsetHeight、offsetLeft 和 offsetParent 不理解的点这里

总结

实现这个效果,就是做了一个 starrySky对象,定义好一些必须的属性,主要靠 disperse() 和 combine() 两个方法,需要星星分散的时候调用disperse(),需要星星连成线的时候调用combine(),好的就这样了。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/93218.html

相关文章

  • JavaScript实现 天星 导航

    摘要:说明分享一个满天星导航栏的效果,代码不多,但效果挺好看,先看看效果图吧。解释实现这个效果,需要掌握的知识不用很多,知道简单的,会用获取元素,能绑定事件基本就足够了。 说明 分享一个满天星导航栏的效果,代码不多,但效果挺好看,先看看效果图吧。 showImg(https://segmentfault.com/img/bV472Y?w=914&h=114); 解释 实现这个效果,需要掌...

    pumpkin9 评论0 收藏0
  • 从今天开始,拿起VuePress打造属于自己的专属博客

    摘要:故九万里,则风斯在下矣,而后乃今培风背负青天,而莫之夭阏者,而后乃今将图南。这里是文件的内容部分最后更新时间最后更新时间默认不开启,它是基于提交的时间戳,所以我们的静态站点是需要通过的仓库进行管理的,并且它是按的时间来计算的。VuePress(0.x版本) 本blog配套了一个基于 VuePress 的一个简单的配置案例,此配置案例包含了本blog绝大部分配置案例,更多详情请移步这里VueP...

    dantezhao 评论0 收藏0
  • javascript 半自动式下滑一定高度,导航固定

    摘要:滚动条下滑一定高度时,固定指定的导航条。固定对象距离顶部高度为去掉前面的双斜杠,然后在页面中刷新并向下滚动,页面就弹出的高度。效果示例效果戳我。当前做法已经不建议,建议使用最新效果新地址 滚动条下滑一定高度时,固定指定 ID 的导航条。 使用方法:1、修改 FixTop() 中 id 为需要固定导航的相应 id ;2、修改 FixTop() 中 offsettop 为需要固定对象导航距...

    raise_yang 评论0 收藏0
  • ❤️使用 HTML、CSS 和 JS 创建响应式可过滤的游戏+工具展示页面 ❤️

    响应式可过滤的游戏+工具展示页面 用于各种网站以按类别对图像进行排序。在本文中,我将向您展示如何借助 HTML CSS 和 javascript 创建响应式可过滤的游戏+工具展示页面。 可过滤作品集是一种流行的网络元素,可用于各种网站。它是一种作品画廊,大量作品整齐地排列在一起。值得注意的一点是,所有作品都可以在这里按类别排序。有一个导航栏,其中对所有类别进行了排序。单击这些类别中的任何一个时。...

    Lavender 评论0 收藏0

发表评论

0条评论

weizx

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<