jquery实现叠层3D文字特效代码分享


Posted in Javascript onAugust 21, 2015

jquery实现叠层3D文字特效是一款效果非常酷,实现代码也很简单,没有用HTML5和CSS3元素,纯粹用Jquery代码实现的。

运行效果图:------------------------------效果演示-----------------------------

jquery实现叠层3D文字特效代码分享

为大家分享的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文字特效代码,希望大家可以喜欢。

Javascript 相关文章推荐
测试JavaScript字符串处理性能的代码
Dec 07 Javascript
神奇的7个jQuery 3D插件整理
Jan 06 Javascript
jquery 操作DOM案例代码分享
Apr 05 Javascript
浅谈JavaScript超时调用和间歇调用
Aug 30 Javascript
JS中传递参数的几种不同方法比较
Jan 20 Javascript
关于vue单文件中引用路径的处理方法
Jan 08 Javascript
解决vue2.0动态绑定图片src属性值初始化时报错的问题
Mar 14 Javascript
Vue动态修改网页标题的方法及遇到问题
Jun 09 Javascript
angularjs1.X 重构controller 的方法小结
Aug 15 Javascript
es6 super关键字的理解与应用实例分析
Feb 15 Javascript
Node Express用法详解【安装、使用、路由、中间件、模板引擎等】
May 13 Javascript
vue点击按钮实现简单页面的切换
Sep 08 Javascript
jQuery实现垂直半透明手风琴特效代码分享
Aug 21 #Javascript
js实现温度计时间样式代码分享
Aug 21 #Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
Aug 21 #Javascript
JS打字效果的动态菜单代码分享
Aug 21 #Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
Aug 21 #Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
Aug 21 #Javascript
HTML5之WebSocket入门3 -通信模型socket.io
Aug 21 #Javascript
You might like
php socket方式提交的post详解
2008/07/19 PHP
PHP实现仿百度文库,豆丁在线文档效果(word,excel,ppt转flash)
2016/03/10 PHP
js 小数取整的函数
2010/05/10 Javascript
javascript一个无懈可击的实例化XMLHttpRequest的方法
2010/10/13 Javascript
jQuery 获取兄弟元素的几种不错方法
2014/05/23 Javascript
js使用setTimeout实现定时炸弹的方法
2015/04/10 Javascript
jquery ajax结合thinkphp的getjson实现跨域的方法
2016/06/06 Javascript
jquery实时获取时间的简单实例
2017/01/26 Javascript
你可能不知道的前端算法之文字避让(inMap)
2018/01/12 Javascript
微信小程序实现即时通信聊天功能的实例代码
2018/08/17 Javascript
基于axios 解决跨域cookie丢失的问题
2018/09/26 Javascript
nuxt配置通过指定IP和端口访问的实现
2020/01/08 Javascript
ant-design-vue中的select选择器,对输入值的进行筛选操作
2020/10/24 Javascript
新手该如何学python怎么学好python?
2008/10/07 Python
Python设计模式之代理模式实例
2014/04/26 Python
python字符串对其居中显示的方法
2015/07/11 Python
详解C++编程中一元运算符的重载
2016/01/19 Python
深入理解python中的闭包和装饰器
2016/06/12 Python
Python实现网络端口转发和重定向的方法
2016/09/19 Python
flask框架使用orm连接数据库的方法示例
2018/07/16 Python
keras K.function获取某层的输出操作
2020/06/29 Python
Python抖音快手代码舞(字符舞)的实现方法
2021/02/07 Python
匡威比利时官网:Converse Belgium
2017/04/13 全球购物
英国水族馆和池塘用品购物网站:Warehouse Aquatics
2019/08/29 全球购物
房地产财务管理制度
2014/02/02 职场文书
机关党员2014全国两会学习心得体会
2014/03/10 职场文书
《欢乐的泼水节》教学反思
2014/04/22 职场文书
见习报告的格式
2014/11/04 职场文书
2015最新学生自我评价范文
2015/03/03 职场文书
小学生心理健康活动总结
2015/05/08 职场文书
学校教学工作总结2015
2015/05/19 职场文书
2015年园林绿化工作总结
2015/05/23 职场文书
幼儿园庆六一主持词
2015/06/30 职场文书
2019运动会广播加油稿汇总
2019/08/21 职场文书
Python基础之变量的相关知识总结
2021/06/23 Python
Android开发手册TextInputLayout样式使用示例
2022/06/10 Java/Android