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 对象比较实现代码
Apr 27 Javascript
JavaScript学习笔记(十)
Jan 17 Javascript
JavaScript中链式调用之研习
Apr 07 Javascript
node.js中的path.join方法使用说明
Dec 08 Javascript
在node中如何使用 ES6
Apr 22 Javascript
node.js中fs.stat与fs.fstat的区别详解
Jun 01 Javascript
jQuery+Ajax实现用户名重名实时检测
Jun 01 jQuery
Vue 组件间的样式冲突污染
Aug 31 Javascript
vue中阻止click事件冒泡,防止触发另一个事件的方法
Feb 08 Javascript
微信小程序实时聊天WebSocket
Jul 05 Javascript
对angularJs中2种自定义服务的实例讲解
Sep 30 Javascript
webpack4之如何编写loader的方法步骤
Jun 06 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
Zerg剧情介绍
2020/03/14 星际争霸
PHP 类型转换函数intval
2009/06/20 PHP
PHP判断来访是搜索引擎蜘蛛还是普通用户的代码小结
2015/09/14 PHP
PHP数据库表操作的封装类及用法实例详解
2016/07/12 PHP
php表单习惯用的正则表达式
2017/10/11 PHP
javascript之dhDataGrid Ver2.0.0代码
2007/07/01 Javascript
js拦截alert对话框另类应用
2013/01/16 Javascript
JavaScript获取当前页面上的指定对象示例代码
2014/02/28 Javascript
jQuery toggleClass应用实例(附效果图)
2014/04/06 Javascript
分享一款基于jQuery的视频播放插件
2014/10/09 Javascript
avalonjs制作响应式瀑布流特效
2015/05/06 Javascript
php结合imgareaselect实现图片裁剪
2015/07/05 Javascript
一个字符串中出现次数最多的字符 统计这个次数【实现代码】
2016/04/29 Javascript
深入浅析knockout源码分析之订阅
2016/07/12 Javascript
jQuery Ajax实现跨域请求
2017/01/21 Javascript
用 js 的 selection range 操作选择区域内容和图片
2017/04/18 Javascript
JavaScript数组排序reverse()和sort()方法详解
2017/12/24 Javascript
Vue.js 2.0和Cordova开发webApp环境搭建方法
2018/02/26 Javascript
layui点击弹框页面 表单请求的方法
2019/09/21 Javascript
react实现同页面三级跳转路由布局
2019/09/26 Javascript
JavaScript多种图形实现代码实例
2020/06/28 Javascript
python select.select模块通信全过程解析
2017/09/20 Python
Python面向对象class类属性及子类用法分析
2018/02/02 Python
django 开发忘记密码通过邮箱找回功能示例
2018/04/17 Python
基于Python3.6中的OpenCV实现图片色彩空间的转换
2020/02/03 Python
jupyter notebook 的工作空间设置操作
2020/04/20 Python
python中前缀运算符 *和 **的用法示例详解
2020/05/28 Python
Python如何实现定时器功能
2020/05/28 Python
英国最大的LED专业零售商:Led Hut
2018/03/16 全球购物
毕业生自荐书
2014/02/02 职场文书
三好学生个人先进事迹材料
2014/05/17 职场文书
2014大学生职业生涯规划书最新范文
2014/09/13 职场文书
2014年党风建设工作总结
2014/11/19 职场文书
品德与社会教学反思
2016/02/24 职场文书
mysql获取指定时间段中所有日期或月份的语句(不设存储过程,不加表)
2021/06/18 MySQL
Z-Order加速Hudi大规模数据集方案分析
2022/03/31 Servers