Explication détaillée de la méthode jquery d'implémentation du texte 3D superposé-js tutoriel-php.cn

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

php中世界最好的语言

Libérer： 2018-04-24 10:21:56

original

1272 Les gens l'ont consulté

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>

Copier après la connexion

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!