jquery实现叠层3D文字特效代码分享
更新时间：2015年08月21日 15:34:37 投稿：lijiao
本文主要介绍了jquery实现叠层3D文字特效，实现很简单
jquery实现叠层3D文字特效是一款效果非常酷，实现代码也很简单，没有用HTML5和CSS3元素，纯粹用Jquery代码实现的。
运行效果图：------------------------------效果演示-----------------------------
为大家分享的jquery实现叠层3D文字特效代码如下
<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>
以上就是为大家分享的jquery实现叠层3D文字特效代码，希望大家可以喜欢。
相关文章
结构定义了两个层，一个为半透明的背景层，一个是弹出层主要结构，都设为浮动position:absolute;背景层遮掉所有body内容很容 易做到。2009-12-12
这篇文章主要为大家详细介绍了jQuery ajax调用webservice的注意事项，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
下面小编就为大家带来一篇基于LayUI实现前端分页功能的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
这篇文章主要为大家详细介绍了jQuery实现tab栏切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
这篇文章主要介绍了jQuery 中ajax异步调用的四种方式,实例讲解,需要的朋友可以参考下。2016-06-06
这篇文章主要介绍了jquery的live使用注意事项,需要的朋友可以参考下2014-02-02
去年的时候刚接触Jquery，也就做界面特效用了下，对其很有兴趣，迫于现在项目中不怎么用，对其甚是想念呀，这不没抽点时间再来看看Juery中好玩的东西。2011-09-09
这篇文章介绍了jquery设置控件位置的方法，有需要的朋友可以参考一下2013-08-08
这篇文章主要为大家详细介绍了基于jQuery实现表格的查看修改删除，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-08-08
这篇文章主要介绍了jQuery常见事件的监听方式，页面经常会有各种事件发生，事件发生后需要进行一些特定处理，即执行特定的函数或者语句。这就需要对事件进行监听，下面关于监听事件的介绍，需要的小伙伴可以参考一下2022-03-03
最新评论