cari

Rumah >hujung hadapan web >tutorial js >jquery melaksanakan overlay kesan teks 3D sharing_jquery

jquery melaksanakan overlay kesan teks 3D sharing_jquery

WBOY
WBOYasal
2016-05-16 15:43:371808semak imbas

Jquery melaksanakan tindanan kesan teks 3D Kesannya sangat keren, dan kod pelaksanaannya juga sangat mudah Ia tidak menggunakan elemen HTML5 dan CSS3, dan dilaksanakan semata-mata dengan kod Jquery.

Penyampaian operasi: -----------------------------Demonstrasi kesan----- -- ------------------------

Kod pelaksanaan jquery untuk menindih kesan teks 3D yang dikongsi dengan anda adalah seperti berikut

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

Di atas ialah kod jquery untuk melaksanakan tindanan kesan khas teks 3D yang dikongsi dengan anda.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：jQuery html5 css3 melaksanakan borang bukan muat semula sudut bulat dengan fungsi pengesahan input code_jqueryArtikel seterusnya：jQuery html5 css3 melaksanakan borang bukan muat semula sudut bulat dengan fungsi pengesahan input code_jquery

Artikel berkaitan

Lihat lagi