Detaillierte Erläuterung der Methode von jquery zum Implementieren von Overlay-3D-Text-js-Tutorial-php.cn

Detaillierte Erläuterung der Methode von jquery zum Implementieren von Overlay-3D-Text

php中世界最好的语言

Freigeben： 2018-04-24 10:21:56

Original

1329 Leute haben es durchsucht

Dieses Mal werde ich Ihnen die Methode zur Implementierung von Overlay-3D-Text in JQuery ausführlich erläutern. Was sind die Vorsichtsmaßnahmen für die Implementierung von Overlay-3D-Text in JQuery? sehen.

<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>

Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Das jQuery-Plug-in realisiert abwechselnde Tabellenzeilenfarben und interagiert mit der Maus

jQuery+ PHP realisiert die Tabellenbearbeitung und speichert die Methode

jQuery-Operation Tabellenmethodenzusammenfassung

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Methode von jquery zum Implementieren von Overlay-3D-Text. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!