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 相关文章推荐
js 刷新页面的代码小结 推荐
Apr 02 Javascript
返回对象在当前级别中是第几个元素的实现代码
Jan 20 Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
May 08 Javascript
判断客户浏览器是否支持cookie的示例代码
Dec 23 Javascript
Underscore.js常用方法总结
Feb 28 Javascript
封装属于自己的JS组件
Jan 27 Javascript
基于JavaScript实现前端文件的断点续传
Oct 17 Javascript
jQuery实现的浮动层div浏览器居中显示效果
Feb 03 Javascript
Vue 获取数组键名的方法
Jun 21 Javascript
iview在vue-cli3如何按需加载的方法
Oct 31 Javascript
javascriptvoid(0)含义以及与&quot;#&quot;的区别讲解
Jan 19 Javascript
压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
Feb 03 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
SONY SRF-M100的电路分析
2021/03/02 无线电
调试PHP程序的多种方法介绍
2014/11/06 PHP
php数据序列化测试实例详解
2017/08/12 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
详解php反序列化
2020/06/10 PHP
jquery选择器使用详解
2014/04/08 Javascript
jQuery is()函数用法3例
2014/05/06 Javascript
nodejs 整合kindEditor实现图片上传
2015/02/03 NodeJs
JS实现带缓冲效果打开、关闭、移动一个层的方法
2015/05/09 Javascript
简介JavaScript中的setDate()方法的使用
2015/06/11 Javascript
JavaScript兼容性总结之获取非行间样式案例
2016/08/07 Javascript
微信 java 实现js-sdk 图片上传下载完整流程
2016/10/21 Javascript
利用angular.copy取消变量的双向绑定与解析
2016/11/25 Javascript
微信小程序 闭包写法详细介绍
2016/12/14 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
2017/01/10 Javascript
jQuery为DOM动态追加事件的方法
2017/02/16 Javascript
EasyUI Tree树组件无限循环的解决方法
2017/09/27 Javascript
Angular17之Angular自定义指令详解
2018/01/21 Javascript
JavaScript实现京东购物放大镜和选项卡效果的方法分析
2018/07/05 Javascript
微信小程序实现九宫格抽奖
2020/04/15 Javascript
微信小程序swiper左右扩展各显示一半代码实例
2019/12/05 Javascript
Python加pyGame实现的简单拼图游戏实例
2015/05/15 Python
Python实现获取域名所用服务器的真实IP
2015/10/25 Python
详解python发送各类邮件的主要方法
2016/12/22 Python
python 将print输出的内容保存到txt文件中
2018/07/17 Python
Python利用sqlacodegen自动生成ORM实体类示例
2019/06/04 Python
Python操作Excel工作簿的示例代码(\*.xlsx)
2020/03/23 Python
Django如何使用jwt获取用户信息
2020/04/21 Python
市场营销专业推荐信
2013/11/03 职场文书
交通法规咨询中心工作职责
2013/11/27 职场文书
应聘编辑职位自荐信范文
2014/01/05 职场文书
应届中专生自荐书范文
2014/02/13 职场文书
新闻稿格式范文
2015/07/18 职场文书
保姆聘用合同
2015/09/21 职场文书
PHP对接阿里云虚拟号的实现(号码隐私保护)
2021/04/06 PHP
HTML CSS 一个标签实现带动画的抖音LOGO
2022/04/26 HTML / CSS