jquery實現(xiàn)疊層3D文字特效代碼分享
更新時間：2015年08月21日 15:34:37 投稿：lijiao
本文主要介紹了jquery實現(xiàn)疊層3D文字特效，實現(xiàn)很簡單
jquery實現(xiàn)疊層3D文字特效是一款效果非?？?，實現(xiàn)代碼也很簡單，沒有用HTML5和CSS3元素，純粹用Jquery代碼實現(xiàn)的。
運行效果圖：------------------------------效果演示-----------------------------
為大家分享的jquery實現(xiàn)疊層3D文字特效代碼如下
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery實現(xiàn)疊層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>
以上就是為大家分享的jquery實現(xiàn)疊層3D文字特效代碼，希望大家可以喜歡。
您可能感興趣的文章:
相關(guān)文章
結(jié)構(gòu)定義了兩個層，一個為半透明的背景層，一個是彈出層主要結(jié)構(gòu)，都設(shè)為浮動position:absolute;背景層遮掉所有body內(nèi)容很容 易做到。2009-12-12
jQuery ajax調(diào)用webservice注意事項
這篇文章主要為大家詳細介紹了jQuery ajax調(diào)用webservice的注意事項，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
下面小編就為大家?guī)硪黄贚ayUI實現(xiàn)前端分頁功能的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)tab欄切換效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
這篇文章主要介紹了jQuery 中ajax異步調(diào)用的四種方式,實例講解,需要的朋友可以參考下。2016-06-06
這篇文章主要介紹了jquery的live使用注意事項,需要的朋友可以參考下2014-02-02
去年的時候剛接觸Jquery，也就做界面特效用了下，對其很有興趣，迫于現(xiàn)在項目中不怎么用，對其甚是想念呀，這不沒抽點時間再來看看Juery中好玩的東西。2011-09-09
這篇文章介紹了jquery設(shè)置控件位置的方法，有需要的朋友可以參考一下2013-08-08
這篇文章主要為大家詳細介紹了基于jQuery實現(xiàn)表格的查看修改刪除，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08
這篇文章主要介紹了jQuery常見事件的監(jiān)聽方式，頁面經(jīng)常會有各種事件發(fā)生，事件發(fā)生后需要進行一些特定處理，即執(zhí)行特定的函數(shù)或者語句。這就需要對事件進行監(jiān)聽，下面關(guān)于監(jiān)聽事件的介紹，需要的小伙伴可以參考一下2022-03-03