Heim > Artikel > Web-Frontend > jquery implementiert den Code „sharing_jquery“ für Overlay-3D-Texteffekte

jquery implementiert den Code „sharing_jquery“ für Overlay-3D-Texteffekte

WBOYOriginal: 2016-05-16 15:43:371720Durchsuche

Jquery implementiert Overlay-3D-Texteffekte und der Implementierungscode ist auch sehr einfach. Er verwendet keine HTML5- und CSS3-Elemente und wird ausschließlich mit Jquery-Code implementiert.

Operationsrendering: --------------Effektdemonstration----- -- ----------

Der für Sie freigegebene JQuery-Implementierungscode zum Überlagern von 3D-Texteffekten lautet wie folgt

<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>
<div class="box">
 <p>脚本之家</p>
</div>
</body>
</html>

Das Obige ist der mit Ihnen geteilte JQuery-Code zum Implementieren von Overlay-3D-Text-Spezialeffekten.

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 HTML5 CSS3 implementiert ein nicht aktualisierungsfreies Formular mit abgerundeten Ecken mit der Eingabeüberprüfungsfunktion code_jqueryNächster Artikel：jQuery HTML5 CSS3 implementiert ein nicht aktualisierungsfreies Formular mit abgerundeten Ecken mit der Eingabeüberprüfungsfunktion code_jquery

In Verbindung stehende Artikel

Mehr sehen