这次给大家带来jquery实现叠层3D文字方法详解,jquery实现叠层3D文的注意事项有哪些,下面就是实战案例,一起来看一下。
jquery实现叠层3D文字特效 *{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;}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"}); });});
php
登录后复制
相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!
推荐阅读:
jQuery插件实现表格隔行变色并且与鼠标进行交互
jQuery+php实现编辑表格并保存方法
jQuery操作Table方法总结
以上就是jquery实现叠层3D文字方法详解的详细内容,更多请关注【创想鸟】其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。
发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2768889.html