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 相关文章推荐
excel操作之Add Data to a Spreadsheet Cell
Jun 12 Javascript
jquery 实现两级导航菜单附效果图
Mar 07 Javascript
红米手机抢购的js代码
Mar 10 Javascript
JavaScript之数组(Array)详解
Apr 01 Javascript
js 获取元素在页面上的偏移量的方法汇总
Apr 13 Javascript
使用JS读取XML文件的方法
Nov 25 Javascript
HTML5 js实现拖拉上传文件功能
Nov 20 Javascript
JS轮播图中缓动函数的封装
Nov 25 Javascript
JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
Apr 19 Javascript
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
JS 封装父页面子页面交互接口的实例代码
Jun 25 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
Aug 17 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+AJAX实现无刷新注册(带用户名实时检测)
2006/12/02 PHP
php中iconv函数使用方法
2008/05/24 PHP
PHP4中session登录页面的应用
2008/07/25 PHP
linux下使用crontab实现定时PHP计划任务失败的原因分析
2014/07/05 PHP
PHP开启opcache提升代码性能
2015/04/26 PHP
php传值方式和ajax的验证功能
2017/03/27 PHP
ThinkPHP3.1.x修改成功与失败跳转页面的方法
2017/09/29 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
面向对象的javascript(笔记)
2009/10/06 Javascript
jQuery动画animate方法使用介绍
2013/05/06 Javascript
jquery对table中各数据的增加、保存、删除操作示例
2014/05/14 Javascript
详解JavaScript中的forEach()方法的使用
2015/06/08 Javascript
javascript简单实现类似QQ头像弹出效果的方法
2015/08/03 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
2018/01/23 Javascript
JavaScript正则表达式函数总结(常用)
2018/02/22 Javascript
webpack4.0 入门实践教程
2018/10/08 Javascript
深入理解vue-class-component源码阅读
2019/02/18 Javascript
深入了解query和params的使用区别
2019/06/24 Javascript
JS原形与原型链深入详解
2020/05/09 Javascript
Element Cascader 级联选择器的使用示例
2020/07/27 Javascript
[17:00]DOTA2 HEROS教学视频教你分分钟做大人-帕克
2014/06/10 DOTA
使用Python3编写抓取网页和只抓网页图片的脚本
2015/08/20 Python
Python数据结构之顺序表的实现代码示例
2017/11/15 Python
Pycharm 设置自定义背景颜色的图文教程
2018/05/23 Python
Python 获取主机ip与hostname的方法
2018/12/17 Python
selenium+python自动化测试之鼠标和键盘事件
2019/01/23 Python
python解析命令行参数的三种方法详解
2019/11/29 Python
Python中如何引入第三方模块
2020/05/27 Python
python中的插入排序的简单用法
2021/01/19 Python
英国最大的割草机购买网站:Just Lawnmowers
2019/11/02 全球购物
新闻专业个人求职信
2013/12/19 职场文书
毕业大学生自荐信
2014/06/17 职场文书
住房抵押登记委托书
2014/09/27 职场文书
房屋授权无偿使用证明
2014/11/29 职场文书
商业计划书格式、范文
2019/03/21 职场文书
详解缓存穿透击穿雪崩解决方案
2021/05/28 Redis