communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > jquery CSS3 simule l'effet de menu animé Path2.0 code_jquery

jquery CSS3 simule l'effet de menu animé Path2.0 code_jquery

WBOY
Libérer： 2016-05-16 15:41:30
original
1725 Les gens l'ont consulté

L'exemple de cet article décrit le code d'effet de menu animé Path2.0 de simulation jquery CSS3. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Le menu du logiciel d'imitation du téléphone mobile et le menu animé implémentés par CSS3. Notez qu'il y a un tampon après le déplacement du petit bouton. La distance du tampon de chaque petit bouton est différente. Gérez bien ces détails afin de refléter l’effet intelligent.

Code CSS3 : (Veuillez utiliser un navigateur standard non IE pour y accéder) En raison de défauts dans la zone d'exécution du code, veuillez d'abord actualiser la page pour que l'animation se déroule plus facilement. Le petit bouton du menu Chemin devrait également pouvoir pivoter, mais pour une raison quelconque, la rotation n'a aucun effet lorsque le déplacement et la rotation de l'animation CSS3 apparaissent en même temps, donc je ne l'ai pas compris ici. peut étudier la solution.

La capture d'écran de l'effet en cours d'exécution est la suivante :

L'adresse de la démo en ligne est la suivante :

http://demo.jb51.net/js/2015/jquery-css3-path2-style-flash-codes/

Le code spécifique est le suivant : 

<title>CSS3模拟手机软件Path2.0动画菜单</title>
<script src="jquery-1.6.2.min.js"></script>
<style type="text/css">
body { background:#f1eee7}
.phone { width:320px; height:480px; border:#000 solid 1px; position:absolute;}
.menu { width:47px; height:47px; border-radius:47px; border:#fff solid 6px; box-shadow: 0 2px 5px 1px #aaa; cursor:pointer; position:absolute; bottom:15px; left:15px; z-index:10;
background:#c72d15;
background:-webkit-gradient(linear, left top, left bottom, from(#d45753), to(#c22e10), color-stop(0.5, #d63523), color-stop(0.5, #d1261c));}
.menu span { display:block; width:27px; height:27px; background:url(images/bg1.png); text-indent:-999px; position:absolute; top:50%; left:50%; margin-top:-13px; margin-left:-13px; overflow:hidden;}
.btn { width:36px; height:36px; border-radius:36px; border:#fff solid 6px; box-shadow: 0 2px 5px 1px #aaa; cursor:pointer; background:#3b3b3b; position:absolute; bottom:0; left:0; margin-bottom:20px; margin-left:20px;}
.btn span { display:block; width:22px; height:24px; text-indent:-999px; position:absolute; top:50%; left:50%; margin-top:-12px; margin-left:-11px; overflow:hidden; background:url(images/bg1.png) no-repeat;}
.btn1 span { background-position:-27px 0; }
.btn2 span { background-position:-49px 0; }
.btn3 span { background-position:-71px 0; }
.btn4 span { background-position:-93px 0; }
.btn5 span { background-position:-115px 0; }
.btn {
 -webkit-animation-duration:0.3s;
 -webkit-animation-iteration-count:1;
}
/*主菜单*/
@-webkit-keyframes open {
 0%{ -webkit-transform:rotate(0)}
 100%{ -webkit-transform:rotate(-225deg)}
}
@-webkit-keyframes close{
 0%{ -webkit-transform:rotate(45deg)}
 100%{ -webkit-transform:rotate(270deg)}
}
.menu span{
 -webkit-animation-duration:0.5s;
 -webkit-animation-iteration-count:1;
}
.menu span.open {
 -webkit-animation-name:open;
 -webkit-transform:rotate(-225deg);
}
.menu span.close {
 -webkit-animation-name:close;
 -webkit-transform:rotate(270deg);
}
/*照相按钮*/
@-webkit-keyframes btn1open {
 0%{ -webkit-transform:translate(0,175px);}
 20%{ -webkit-transform:translate(0,-10px);}
 100%{ -webkit-transform:translate(0, 0);}
}
@-webkit-keyframes btn1close{
 0%{ -webkit-transform:translate(0,-185px);}
 90%{ -webkit-transform:translate(0,-175px);}
 100%{ -webkit-transform:translate(0, 0);}
}
.btn1.open {
 -webkit-animation-name:btn1open;
 bottom:175px;
 left:0;
}
.btn1.close {
 -webkit-animation-name:btn1close;
 bottom:0;
 left:0;
}
/*位置按钮*/
@-webkit-keyframes btn2open {
 0%{ -webkit-transform:translate(-70px,160px);}
 30%{ -webkit-transform:translate(5px,-10px);}
 100%{ -webkit-transform:translate(0, 0);}
}
@-webkit-keyframes btn2close{
 0%{ -webkit-transform:translate(75px,-170px);}
 70%{ -webkit-transform:translate(70px,-160px);}
 100%{ -webkit-transform:translate(0, 0);}
}
.btn2.open {
 -webkit-animation-name:btn2open;
 bottom:160px;
 left:70px;
}
.btn2.close {
 -webkit-animation-name:btn2close;
 bottom:0;
 left:0;
}
/*音乐按钮*/
@-webkit-keyframes btn3open {
 0%{ -webkit-transform:translate(-130px,120px);}
 50%{ -webkit-transform:translate(10px,-10px);}
 100%{ -webkit-transform:translate(0, 0);}
}
@-webkit-keyframes btn3close{
 0%{ -webkit-transform:translate(140px,-135px);}
 50%{ -webkit-transform:translate(130px,-120px);}
 100%{ -webkit-transform:translate(0, 0);}
}
.btn3.open {
 -webkit-animation-name:btn3open;
 bottom:125px;
 left:130px;
}
.btn3.close {
 -webkit-animation-name:btn3close;
 bottom:0;
 left:0;
}
/*聊天按钮*/
@-webkit-keyframes btn4open {
 0%{ -webkit-transform:translate(-160px,65px);}
 70%{ -webkit-transform:translate(10px,-5px);}
 100%{ -webkit-transform:translate(0, 0);}
}
@-webkit-keyframes btn4close{
 0%{ -webkit-transform:translate(170px,-70px);}
 30%{ -webkit-transform:translate(160px,-65px);}
 100%{ -webkit-transform:translate(0, 0);}
}
.btn4.open {
 -webkit-animation-name:btn4open;
 bottom:65px;
 left:160px;
}
.btn4.close {
 -webkit-animation-name:btn4close;
 bottom:0;
 left:0;
}
/*夜间按钮*/
@-webkit-keyframes btn5open {
 0%{ -webkit-transform:translate(-175px,0);}
 90%{ -webkit-transform:translate(10px,0);}
 100%{ -webkit-transform:translate(0, 0);}
}
@-webkit-keyframes btn5close{
 0%{ -webkit-transform:translate(185px,0);}
 10%{ -webkit-transform:translate(175px,0);}
 100%{ -webkit-transform:translate(0, 0);}
}
.btn5.open {
 -webkit-animation-name:btn5open;
 bottom:0;
 left:175px;
}
.btn5.close {
 -webkit-animation-name:btn5close;
 bottom:0;
 left:0;
}
</style>
<p>由于代码运行框缺陷，请先刷新一下页面动画运行更流畅</p>
<div class="phone">
 <div class="menu"><span>菜单</span></div>
 <div class="btn btn1"><span>照相</span></div>
 <div class="btn btn2"><span>位置</span></div>
 <div class="btn btn3"><span>音乐</span></div>
 <div class="btn btn4"><span>聊天</span></div>
 <div class="btn btn5"><span>夜间</span></div>
</div>
<script>
$(".menu").click(function(){
 var span = $(this).find("span");
 if(span.attr("class") == "open"){
  span.removeClass("open");
  span.addClass("close");
  $(".btn").removeClass("open");
  $(".btn").addClass("close");
 }else{
  span.removeClass("close");
  span.addClass("open");
  $(".btn").removeClass("close");
  $(".btn").addClass("open");
 }
});
</script>
Copier après la connexion

J'espère que cet article sera utile à la conception de la programmation jquery de chacun.

Étiquettes associées：
css3 jquery menu animé 模拟
source：php.cn
Article précédent：Des bords noirs apparaissent lorsque jQuery modifie la transparence des images png sous IE8_jquery Article suivant：Explication détaillée de l'utilisation de la méthode sort() dans les compétences javascript_javascript
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
Derniers articles par auteur
Derniers numéros
Soumettre le formulaire sans bouton en utilisant Javascript/Jquery J'essaie de soumettre un formulaire sans bouton en appelant une fonction JavaScript et en ...
Depuis 2024-04-06 14:54:03
0
2
421
Comment récupérer les valeurs des lignes non sélectionnées dans un tableau de données HTML à l'aide de jquery J'essaie d'obtenir la valeur de toutes les lignes sur lesquelles le bouton n'a pas été cli...
Depuis 2024-04-05 09:26:49
0
1
1418
Besoin d'un script jquery pour déplacer les options sélectionnées à partir d'une zone de sélection en fonction de la sélection actuelle de l'utilisateur final J'ai une page HTML où l'utilisateur final peut classer nos articles via un élément de boît...
Depuis 2024-04-04 18:40:04
0
1
3528
J'ai créé un élément en CSS pur via des signets. Il est créé mais n'est pas visible Mon code est le suivant : g=document.createElement('div');g.setAttribute("id",&q...
Depuis 2024-04-04 17:27:27
0
1
417
Impossible d'envoyer les données du formulaire sur Safari/Firefox iOS Cela fonctionne sur toutes les plateformes sauf Safari/Firefox sur iOS : jQuery("#gfo...
Depuis 2024-04-04 12:53:48
0
1
303
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal