Maison >interface Web >js tutoriel >Effets spéciaux de la barre de navigation étoilée
Effets spéciaux de la barre de navigation étoilée
- php中世界最好的语言original
- 2018-03-17 09:57:462212parcourir
Cette fois, je vais vous présenter l'effet spécial de la barre de navigation du ciel étoilé. Quelles sont les précautions pour mettre en œuvre l'effet spécial de la barre de navigation étoilée. Ce qui suit est un cas pratique, jetons un coup d'œil.
Explication
Partager l'effet d'une barre de navigation étoilée Il n'y a pas beaucoup de code, mais l'effet est plutôt bon. Jetons d'abord un coup d'œil au rendu.
Explication
Pour obtenir cet effet, vous n'avez pas besoin de beaucoup de connaissances. Vous connaissez le CSS simple et pouvez l'utiliser. JS pour obtenir des éléments, il suffit en principe de pouvoir lier des événements.
D'accord, regardons directement le code. Les commentaires ont été rédigés de manière très détaillée. Si vous ne voulez pas voir les commentaires, cliquez ici pour prévisualiser.
<!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>
<p class="wrapper">
<ul class="nav">
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >导航1</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >导航2</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >导航3</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >导航4</a></li>
</ul>
</p>
<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 += "<p class='star' id='star" + i + "'></p>";
}
// 拼接到 元素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>
Remarque : Si vous devez modifier le style, ne positionnez pas l'élément nav et l'élément li à l'intérieur du nav, car la position de la dernière ligne est positionnée en fonction de offsetHeight et offsetLeft du un élément. Si l'élément nav Si l'élément li dans le nav est positionné, l'élément offsetParent de l'élément a sera modifié et la position sera incorrecte.
Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
Lecture recommandée :
String.prototype.format Comment utiliser l'épissage de chaînes
Comment convertir les types de données JS
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript