Maison > Article > interface Web > Explication détaillée de la méthode jquery d'implémentation du texte 3D superposé

Explication détaillée de la méthode jquery d'implémentation du texte 3D superposé

php中世界最好的语言original: 2018-04-24 10:21:561294parcourir

Cette fois, je vais vous apporter une explication détaillée de la méthode d'implémentation du texte 3D superposé dans jquery. Quelles sont les précautions pour implémenter le texte 3D superposé dans jquery. Voici un cas pratique, prenons un. regarder.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery实现叠层3D文字特效</title>
<style type="text/css">
*{margin:0px; padding:0px;}
body{background:#FFF;}
.box{height:160px; width:800px; position:absolute; top:50%; left:50%; margin:-90px 0 0 -320px;}
p{color:#7a9c07; font-size:160px; position:absolute; top:0px; left:0px;letter-spacing:10px; cursor:pointer;}
</style>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
function move(){
 var i;
 var a=0;
 for(i=$(".box p").size();i>0;i--){
 a=a+1; 
 $(".box p").eq(i).css({left:a*1,top:a*(-1),opacity:i*0.02});
 $(".box p").eq(i).animate({left:a*(-1),top:a*(-1),opacity:i*0.02},3000);
 $(".box").animate({"margin-left":"-350px"},3000);
 $(".box p").eq(i).animate({left:a*1,top:a*(-1),opacity:i*0.02},3000);
 $(".box").animate({"margin-left":"-290px"},3000);
 };
}; 
$(document).ready(function(){
 var p=0;
 for(p=0;p<5;p++)
 {
 $(".box").append($(".box p").clone()); 
 };
 move();
 setInterval(move,6100);
 $(".box p").click(function(){
 $(".box p").text("叠层3D文字").css({"font-size":"110px"});
 $(".box").css({"margin-top":"-50px"});
 });
});
</script>
</head>
<body>
<p class="box">
 <p>PHP</p>
</p>
</body>
</html>

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 :

Le plug-in jQuery réalise des couleurs de lignes de tableau alternées et interagit avec la souris

jQuery+ PHP réalise l'édition de table Et enregistre la méthode

Opération jQuery Résumé de la méthode de table

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!

Déclaration：

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

Article précédent：jQuery implémente l'effet de carrousel de diapositives rotatif (avec code)Article suivant：jQuery implémente l'effet de carrousel de diapositives rotatif (avec code)

Articles Liés

Voir plus