jQuery实现3D文字特效的方法
本文实例讲述了jQuery实现3D文字特效的方法。分享给大家供大家参考。具体如下:
这款基于jQuery的3D文字特效演示,不是真正的3D,是由多个文字形成的3D效果,如果首次加载网页出错的话,请刷新一下页面,当然在使用中不会出现此问题。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <metahttp-equiv="Content-type"content="text/html;charset=utf-8"/> <title>jQuery3D文字</title> <styletype="text/css"> body{ font-family:Arial,"MSTrebuchet",sans-serif; background-color:#111; } #list{ margin:0auto; height:600px; width:600px; overflow:hidden; position:relative; background-color:#000; }#listul,#listli{ list-style:none; margin:0; padding:0; } #lista{ position:absolute; text-decoration:none; color:#666; } #lista:hover{ color:#ccc; } </style> <scriptsrc="/ajaxjs/jquery1.3.2.js"type="text/javascript"></script> </head> <body> <divid="list"> <ul> <li><ahref="#">ajax</a></li> <li><ahref="#">css</a></li> <li><ahref="#">design</a></li> <li><ahref="#">firefox</a></li> <li><ahref="#">flash</a></li> <li><ahref="#">html</a></li> <li><ahref="#">Devirtuoso</a></li> <li><ahref="#">jquery</a></li> <li><ahref="#">PHP</a></li> <li><ahref="#">SEO</a></li> <li><ahref="#">usability</a></li> <li><ahref="#">www</a></li> <li><ahref="#">web</a></li> <li><ahref="#">xhtml</a></li> </ul> </div> <scripttype="text/javascript"> $(document).ready(function(){ varelement=$('#lista');; varoffset=0; varstepping=0.03; varlist=$('#list'); var$list=$(list) $list.mousemove(function(e){ vartopOfList=$list.eq(0).offset().top varlistHeight=$list.height() stepping=(e.clientY-topOfList)/ listHeight*0.2-0.1; }); for(vari=element.length-1;i>=0;i--) { element[i].elemAngle=i*Math.PI*2/element.length; } setInterval(render,20); functionrender(){ for(vari=element.length-1;i>=0;i--){ varangle=element[i].elemAngle+offset; x=120+Math.sin(angle)*30; y=45+Math.cos(angle)*40; size=Math.round(40-Math.sin(angle)*40); varelementCenter=$(element[i]).width()/2; varleftValue=(($list.width()/2)*x/100-elementCenter)+"px" $(element[i]).css("fontSize",size+"pt"); $(element[i]).css("opacity",size/100); $(element[i]).css("zIndex",size); $(element[i]).css("left",leftValue); $(element[i]).css("top",y+"%"); } offset+=stepping; } }); </script> </body> </html>
希望本文所述对大家的jQuery程序设计有所帮助。