Maison > interface Web > js tutoriel > javascript+css3 implémente les compétences d'effets de menu de boutons dynamiques_javascript

javascript+css3 implémente les compétences d'effets de menu de boutons dynamiques_javascript

WBOY
Libérer: 2016-05-16 15:16:03
original
2316 Les gens l'ont consulté

Un boîtier d'effets spéciaux de bouton de menu qui implémente simplement des effets dynamiques.

Sans plus tarder, je publierai le code directement pour vous. Veuillez me donner quelques conseils pour savoir si le code est bon ou non.

<div class="bar" id="menubar">
<div class="menu" id="menu0">
</div>
<div class="menu" id="menu1">
</div>
<div class="menu" id="menu2">
</div>
</div>
.bar{
width:px;
height:px;
border:px solid #ccc;
border-radius:%;
position:fixed;
top:px;
right:px;
z-index:;
cursor:pointer;
}
.menu{
width:px;
height:px;
background-color:#ccc;
position:absolute;
transform:translated(-%,-%,);
left:%;
transition:all .s cubic-bezier(., ., ., .) s
}
#menu{
top:%;
}
#menu{
top:%;
}
#menu{
top:%;
}
window.onload = function () {
var menubar = document.getElementById("menubar");
var menu = document.getElementById("menu");
var menu = document.getElementById("menu");
var menu = document.getElementById("menu");
var i = ;
menubar.onclick = function () {
i++;
if (i % == ) {
menu.style.top = + "%";
menu.style.display = "none";
menu.style.top = + "%";
menu.style.transform = "translated(-%,-%,) rotate(deg)";
menu.style.transform = "translated(-%,-%,) rotate(deg)";
}
else {
menu.style.transform = "translated(-%,-%,) rotate(deg)";
menu.style.transform = "translated(-%,-%,) rotate(deg)";
menu.style.top = + "%";
menu.style.top = + "%";
menu.style.display = "block";
}
}
}
Copier après la connexion

Le code ci-dessus implémente simplement les effets de menu de boutons dynamiques. J'espère qu'il sera utile à tout le monde.

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal