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 数组排序函数
Aug 20 Javascript
IE下Ajax缓存问题的快速解决方法(get方式)
Jan 09 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
Feb 26 Javascript
JavaScript 动态加载脚本和样式的方法
Apr 13 Javascript
Angularjs制作简单的路由功能demo
Apr 14 Javascript
Angular 根据 service 的状态更新 directive
Apr 03 Javascript
JavaScript中apply方法的应用技巧小结
Sep 29 Javascript
AngularJS指令与指令之间的交互功能示例
Dec 14 Javascript
bootstrap laydate日期组件使用详解
Jan 04 Javascript
Vue.js实现的表格增加删除demo示例
May 22 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
Oct 12 Javascript
jQuery带控制按钮轮播图插件
Jul 31 jQuery
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实现定时生成HTML网站首页实例代码
2008/11/20 PHP
一步一步学习PHP(3) php 函数
2010/02/15 PHP
php异步多线程swoole用法实例
2014/11/14 PHP
PHP中require和include路径问题详解
2014/12/25 PHP
Laravel 5.3 学习笔记之 安装
2016/08/28 PHP
PHP实现简单登录界面
2019/10/23 PHP
js电信网通双线自动选择技巧
2008/11/18 Javascript
Javascript控制页面链接在新窗口打开具体方法
2013/08/16 Javascript
javascript对JSON数据排序的3个例子
2014/04/12 Javascript
超炫的jquery仿flash导航栏特效
2014/11/11 Javascript
有关Promises异步问题详解
2015/11/13 Javascript
JS实现获取当前URL和来源URL的方法
2016/08/24 Javascript
jquery 实时监听输入框值变化的完美方法(必看)
2017/01/26 Javascript
浅谈javascript中的 “ &amp;&amp; ” 和 “ || ”
2017/02/02 Javascript
关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法
2017/03/02 Javascript
在JS中如何把毫秒转换成规定的日期时间格式实例
2017/05/11 Javascript
vue实现搜索功能
2019/05/28 Javascript
vue子路由跳转实现tab选项卡
2019/07/24 Javascript
操作按钮悬浮固定在微信小程序底部的实现代码
2019/08/02 Javascript
vue 解决computed修改data数据的问题
2019/11/06 Javascript
vue+elementUI组件table实现前端分页功能
2020/11/15 Javascript
java遇到微信小程序 &quot;支付验证签名失败&quot; 问题解决
2019/12/22 Javascript
JS函数本身的作用域实例分析
2020/03/16 Javascript
Python循环语句中else的用法总结
2016/09/11 Python
用yum安装MySQLdb模块的步骤方法
2016/12/15 Python
python 删除指定时间间隔之前的文件实例
2018/04/24 Python
python之super的使用小结
2018/08/13 Python
python函数修饰符@的使用方法解析
2019/09/02 Python
图解Python中深浅copy(通俗易懂)
2020/09/03 Python
CSS类名支持中文命名的示例
2014/04/04 HTML / CSS
检查接待方案
2014/02/27 职场文书
2014机关干部学习“焦裕禄精神”思想汇报
2014/09/19 职场文书
学校推普周活动总结
2015/05/07 职场文书
初中团支书竞选稿
2015/11/21 职场文书
关于MybatisPlus配置双数据库驱动连接数据库问题
2022/01/22 Java/Android
pd.drop_duplicates删除重复行的方法实现
2022/06/16 Python