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