JavaScript实现 满天星 导航栏

说明分享一个满天星导航栏的效果,代码不多,但效果挺好看,先看看效果图吧。解释实现这个效果,需要掌握的知识不用很多,知道简单的CSS,会用JS获取元素,能绑定事件基本就足够了。好的,我们直接来看代码,注释已经写的很详细了,不想看有注释的,点这里。

大家好,又见面了,我是你们的朋友全栈君。

说明

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

JavaScript实现 满天星 导航栏

解释

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

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <style> body { background-color: #000; /* 防止出现左右的滚动条 */ overflow: hidden; margin: 0; padding: 0; } .wrapper { width: 100%; height: 100px; } .wrapper .nav { list-style: none; width: 800px; height: 100px; padding: 0; margin: 0 auto; } .wrapper .nav li { width: 25%; height: 50px; float: left; margin-top: 25px; } .wrapper .nav li a { text-decoration: none; color: #fff; text-align: center; line-height: 50px; display: block; font-size: 20px; font-family: "KaiTi"; } /* 闪烁的星星 的基本样式 */ .star { width: 5px; height: 5px; background: #fff; position: absolute; z-index: -1; } /* 闪烁动画,改变透明度 */ @keyframes blink { from { opacity: 0.2; } to { opacity: 1; } } </style>
 </head>
 <body>
        <div class="wrapper">
            <ul class="nav">
                <li><a href="#">导航1</a></li>
                <li><a href="#">导航2</a></li>
                <li><a href="#">导航3</a></li>
                <li><a href="#">导航4</a></li>
            </ul>
        </div>
<script> // 定义一个 starrySky 对象 var starrySky = { // 星星的数量 starNum: 100, // 星星的大小,返回一个 2 ~ 12 的随机数 starSize () { return 2 + Math.trunc(Math.random() * 10) }, // 星星的颜色  starColor: "#fff", // 线的颜色,鼠标进入导航区域,星星会连成一条线 lineColor: "#fff", // 线的高度 lineHeight: "3px", // 星星连成线的时间 changeTime: "1s", // 初始化方法,生成需要的星星,并调用需要的方法 init () { var html = ""; // 循环生成星星 for (var i = 0; i < this.starNum; i++) { html += "<div class='star' id='star" + i + "'></div>"; } // 拼接到 元素wrapper 中 document.querySelector(".wrapper").innerHTML += html; // 调用 星星分散 的方法 this.disperse(); // 调用 星星聚合连成线 的方法  this.combine(); }, disperse () { // 这个that 保存的是 starrySky 对象 var that = this; // 获取 元素wrapper 的宽度 var width = document.querySelector('.wrapper').offsetWidth; // 获取 元素wrapper 的高度 var height = document.querySelector('.wrapper').offsetHeight; // 循环,开始在元素wrapper 区域内,生成规定数量的 星星, for (var i = 0; i < that.starNum; i++) { // 星星的 top值,0 ~ 元素wrapper 高度的随机数 var top = Math.trunc(height * Math.random()); // 星星的 left值,0 ~ 元素wrapper 宽度的随机数 var left = Math.trunc(width * Math.random()); // 星星的大小,调用 starrySky对象的starSize()方法 var size = that.starSize(); // 设置分散时每个星星样式 document.querySelector("#star" + i).style.cssText += ` top:${top}px; left:${left}px; width:${size}px; height:${size}px; background:${that.starColor}; opacity:${ 
   Math.random()}; border-radius:50%; animation:blink 1s ${ 
   Math.random() * 2}s infinite alternate; `; } }, combine () { // 这个that 保存的是 starrySky 对象 var that = this; // 查找导航栏 里所有的 a元素,遍历他们,每个都绑定上 鼠标进入 和 鼠标移出 事件 document.querySelectorAll(".nav li a").forEach(function (item) { 
     item.addEventListener("mouseover", function (e) { 
     // 这里的this 是触发事件的当前节点对象,就是鼠标进入时候的 a元素 // 当前a元素的宽度 / 星星数 = 最后连成线时,星星的宽度 var width = this.offsetWidth / that.starNum; // 遍历,为每个星星修改样式,开始连成线 for (var i = 0; i < that.starNum; i++) { // 星星的top 值就是,当前a元素的距离顶部的值 + 当前a元素的高度 var top = this.offsetTop + this.offsetHeight; // 星星的left 值就是,当前a元素的距离左边界的值 + 第i个星星 * 星星的宽度 var left = this.offsetLeft + i * width // 设置每个星星连成线时的样式 document.querySelector("#star" + i).style.cssText += ` width:${width}px; top:${top}px; left:${left}px; height:${that.lineHeight}; background:${that.lineColor}; opacity:1; border-radius:0; transition:${that.changeTime}; animation:blink 1s infinite alternate; `; } }); // 鼠标移出 调用 星星分散 的方法 item.addEventListener("mouseout", function () { 
     that.disperse(); }); } ); }, } // 调用 starrySky对象的 init方法,实现满天星效果 starrySky.init(); </script>
 </body>
</html>

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

总结

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

JavaScript实现 满天星 导航栏

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/126664.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 5500xt挖矿算力_rx470d etc算力

    5500xt挖矿算力_rx470d etc算力…每日平均收益为R$4。RX5700XT表现出色的其他加密货币包括:以太坊经典(ETC),拉文币(RVN),天堂协议XHV和Beam(BEAM)。可以用于采矿的同一系列图形卡中的其他型号是RX5700,RX5600XT和RX5500XT。但是,与RX5700XT相比,这些其他型号的利润率较低。NvidiaRTX2060超级频率:1470MHz至1670MHzV…

  • windows下php7.1安装redis扩展以及redis测试使用全过程

    windows下php7.1安装redis扩展以及redis测试使用全过程

    2021年10月21日
  • 相机的光圈大小有什么区别「建议收藏」

    相机的光圈大小有什么区别「建议收藏」很多人单反相机已经用了很久了,但是对于光圈的设置还是不是很清楚,大光圈和小光圈到底有什么区别?拍摄一些场景到底要用什么参数?一起来看看吧。方法/步骤什么叫大光圈:在单反相机当中有一个指标叫做光圈,光圈

  • 挖矿病毒处理记录「建议收藏」

    挖矿病毒处理记录「建议收藏」wnTKYg进程发现 执行top 会发现此进程。wnTKYg应该是利用redis漏洞入侵,加了定时任务,每一段时间向固定地址发送请求,执行挖矿程序后导致cpu和带宽升高,kill进程会自动重启。检查authorized_keys、known_hosts文件[root@zfr~]#cd/root/.ssh[root@zfr~]#catauth…

  • 虚拟存储技术和交换技术的区别是什么_虚拟存储器技术

    虚拟存储技术和交换技术的区别是什么_虚拟存储器技术虚拟存储技术和交换技术很像,乍一看都是换入换出,把暂时不需要用的数据换出内存,将需要用到的数据换入内存,从而实现逻辑上内存的扩充。二者之间的区别是,虚拟存储技术是在一个作业运行的过程中,将作业的数据进行换入换出。王道老师举得例子就是玩儿游戏。这儿换一个游戏,比如玩儿DOTA,停留在场景A的时候,场景B的数据不需要用到,所以不放在内存,转换到场景B的时候再把场景B的数据放入内存。而交换技术是内存紧张时,换出某些进程,腾出内存空间,换入其他进程。换而言之,交换技术是在不同的进程(作业)间的,虚拟存储技术是在一个

  • Ansys 圣维南原理「建议收藏」

    Ansys 圣维南原理「建议收藏」简介圣维南原理分布于弹性体上一小块面积(或体积)内的荷载所引起的物体中的应力,在离荷载作用区稍远的地方,基本上只同荷载的合力和合力矩有关;荷载的具体分布只影响荷载作用区附近的应力分布。还有一种

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号