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

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

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

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

赞 (0)

相关推荐

  • 神奇的7个jQuery 3D插件整理

    神奇的7个jQuery 3D插件整理

    1. Flip HTML content in 3D用jquery实现的3D翻转效果,支持html内容的翻转.2. Agile Carousel3D效果的jQuery跑马灯特效.3. RotationjQuery旋转3D特效.4. Tag Cloud使用jQuery创建的3D标签云.5. Sphere一个jQuery实现的3D星球.6. Flip!7. Faux 3D Effect

  • jquery 3D球状导航的文章分类

    jquery 3D球状导航的文章分类

    前几天写了左边这个3D球状导航的文章分类,这里对实现细节做个简单记录. 效果: 分类标题呈现3D球状效果,点击分类标题的时候,会弹出这个分类对应的推荐文章列表. 效果截图: HTML: 复制代码 代码如下: <div id="mainList"> <div id="list"> <ul> <li><a class="HTML" onclick="ClickLink(this)&quo

  • jQuery+CSS3实现3D立方体旋转效果

    jQuery+CSS3实现3D立方体旋转效果

    本文介绍了如何利用jQuery+CSS3实现3D立方体旋转效果,先看一看效果图: 切换图片过程中,图片进行旋转: HTML结构 3D图片画廊的图片列表和导航按钮分别使用两个无序列表来制作. <section> <div id="css3dimageslider" class="transparency"> <ul> <li> <img src="img/css3dimg1.jpg"> &

  • 基于jquery的3d效果实现代码

    复制代码 代码如下: <html> <head> <script type="text/javascript" src="http://demo.jb51.net/jslib/jquery/jquery-1.4.2.min.js"></script><style> .s_c{ position:relative; width:800px; height:300px; border:1px solid #00

  • 13 款最热门的 jQuery 图像 360 度旋转插件推荐

    13 款最热门的 jQuery 图像 360 度旋转插件推荐

    在 web 页面上使用 jQuery 图像 360 度旋转插件是最美也是最方便的显示图像的方式.这些超级棒的 360° 图像选择插件允许用户更详细的分析产品或者文章.jQuery 图像旋转插件可以让用户从各种角度进行 360 度的图像展示,经常在电子商务网站上使用,帮助消费者更好的了解产品,从任意的一个角度观察欣赏. 在这篇文章中,我们收集了 13 款最佳的 jQuery 图像 360 度旋转插件,这些插件都能进行 360 度图像旋转展示.希望大家能从中找到自己喜欢的,并应用在自己的网站上. 1

  • jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)

    网上发现一个很有意思的jQuery旋转插件,支持Internet Explorer 6.0+ .Firefox 2.0 .Safari 3 .Opera 9 .Google Chrome,高级浏览器下使用Transform,低版本ie使用VML实现. 调用和方法: rotate(angle) angle参数:[Number] – 默认为 0 – 根据给定的角度旋转图片 例如: 复制代码 代码如下: $("#img").rotate(45); rotate(parameters)para

  • jQuery插件slicebox实现3D动画图片轮播切换特效

    jQuery插件slicebox实现3D动画图片轮播切换特效

    漂亮jQuery 3D动画图片轮播切换特效插件jquery.slicebox.js,基于jQuery,插件采用CSS 3D 动画效果,支持事件Callback调用,支持参数自定义配置,如:speed:600 切换速度.autoplay:true 是否自动播放,在浏览器兼容方面,需要浏览器支持CSS3变换变形属性,不支持的将看不到3D特效,推荐学习下代码. 使用方法: 1.加载插件和jQuery <link type="text/css" rel="stylesheet&

  • jquery 圆形旋转图片滚动切换效果

    jquery 圆形旋转图片滚动切换效果

    这个效果比较特别,可爱,所以在外面网站没怎么看到过,有兴趣的朋友可以下载后自己使用. PS: 经过修改已经兼容大众浏览器.效果图:在线演示:http://demo.jb51.net/js/ImagesRotateScroll/index.htmlStep1. 创建HTML 复制代码 代码如下: <div id="rotatescroll"> <div class="viewport"> <ul class="overview&

  • jquery实现的3D旋转木马特效代码分享

    jquery实现的3D旋转木马特效代码分享

    本文实例讲述了jquery实现的3D旋转木马特效.分享给大家供大家参考.具体如下: 这是一款基于jquery实现的3D旋转木马特效代码,适合用于产品展示,便于用户循环浏览产品细节,是一款非常实用的特效代码. 运行效果图:----------------------查看效果 下载源码----------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jquery实现的3D旋转木马特效代码如下 <head> <meta http-equiv=

  • 基于jQuery实现自动轮播旋转木马特效

    基于jQuery实现自动轮播旋转木马特效

    本文实例讲述了jQuery实现自动轮播旋转木马特效.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现自动轮播旋转木马特效代码,实现过程很简单. 运行效果图:           -------------------查看效果 下载源码------------------- 简要教程 jquery.caroursel.js是一款非常实用的可自动轮播的jQuery旋转木马插件.该旋转木马将图片进行堆叠,轮流的将图片推送到最前面来展示,形成旋转木马的效果.  使用方法 该jQuery旋转

  • 让图片旋转任意角度及JQuery插件使用介绍

    引入下方的jquery.rotate.js文件,然后通过$("选择器").rotate(角度);可以旋转任意角度, 例如$("#rotate-image").rotate(45);把这句放在$(document).ready(function(){ });中 就是将id为rotate-image的图片旋转45度. 不过,貌似在Chrome中总是不显示. 唉,找了两个小时,才发现Chrome太坑爹了,没法获取图片的长宽. 解决办法是,把$("#rotate-

随机推荐