Heim > Artikel > Web-Frontend > Detaillierte Erläuterung der Methode von jquery zum Implementieren von Overlay-3D-Text

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

php中世界最好的语言Original: 2018-04-24 10:21:561297Durchsuche

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>

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：jQuery implementiert den rotierenden Folienkarusselleffekt (mit Code)Nächster Artikel：jQuery implementiert den rotierenden Folienkarusselleffekt (mit Code)

In Verbindung stehende Artikel

Mehr sehen