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)文章
這篇文章主要介紹了jQuery實現(xiàn)動畫效果circle的方法,涉及jquery鼠標事件及頁面動畫操作相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
jQuery使用cookie與json簡單實現(xiàn)購物車功能
這篇文章主要介紹了jQuery使用cookie與json簡單實現(xiàn)購物車功能的方法,介紹了jQuery實現(xiàn)購物車的步驟與關(guān)鍵代碼,需要的朋友可以參考下2016-04-04
siblings()方法返回被選元素的所有同級元素。同級元素是共享相同父元素的元素。但是很多朋友不清楚jQuery中的siblings()是什么意思，今天小編給大家介紹下2016-12-12
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)帶進度條的輪播圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要介紹了JQuery為頁面Dom元素綁定事件及解除綁定方法,需要的朋友可以參考下2014-04-04
jQuery簡單實現(xiàn)根據(jù)日期計算星期幾的方法
這篇文章主要介紹了jQuery簡單實現(xiàn)根據(jù)日期計算星期幾的方法,涉及jQuery針對日期時間簡單計算相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
JQuery獲取各種寬度、高度(format函數(shù))實例
本例除了使用標準的JQuery類庫外，還添加了自定義的函數(shù)來進行字符串的format操作。2013-03-03
這篇文章主要介紹了使用jQuery操作HTML的table表格的實例解析,包括用jQuery獲取表格總行數(shù)的小技巧,需要的朋友可以參考下2016-03-03
jquery實現(xiàn)select選擇框內(nèi)容左右移動代碼分享
這篇文章主要介紹了jquery實現(xiàn)select選擇框內(nèi)容左右移動代碼，感興趣的小伙伴們可以參考一下2015-11-11
這篇文章主要介紹了Jquery序列化后的表單值轉(zhuǎn)換成Json的相關(guān)資料，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2017-06-06