本文实例讲述了jQuery实现3D文字特效的方法。分享给大家供大家参考。具体如下： 这款基于jQuery的3D文字特效演示，不是真正的3D，是由多个文字形成的3D效果，如果首次加载网页出错的话，请刷新一下页面，当然在使用中不会出现此问题。 复制代码 代码如下: jQuery 3D文字 <br /> body{<br /> font-family: Arial, "MS Trebuchet", sans-serif;<br /> background-color: #111;<br /> }<br /> #list{<br /> margin:0 auto;<br /> height:600px;<br /> width:600px;<br /> overflow:hidden;<br /> position:relative;<br /> background-color: #000;<br /> }#list ul,#list li{<br /> list-style:none;<br /> margin:0;<br /> padding:0;<br /> }<br /> #list a{<br /> position:absolute;<br /> text-decoration: none;<br /> color:#666;<br /> }<br /> #list a:hover{<br /> color:#ccc;<br /> }<br /> ajax css design firefox flash html Devirtuoso jquery PHP SEO usability www web xhtml <br /> $(document).ready(function(){<br /> var element = $('#list a');;<br /> var offset = 0; <br /> var stepping = 0.03;<br /> var list = $('#list');<br /> var $list = $(list)<br /> $list.mousemove(function(e){<br /> var topOfList = $list.eq(0).offset().top<br /> var listHeight = $list.height()<br /> stepping = (e.clientY - topOfList) / listHeight * 0.2 - 0.1;<br /> });<br /> for (var i = element.length - 1; i >= 0; i--)<br /> {<br /> element[i].elemAngle = i * Math.PI * 2 / element.length;<br /> }<br /> setInterval(render, 20);<br /> function render(){<br /> for (var i = element.length - 1; i >= 0; i--){<br /> var angle = element[i].elemAngle + offset;<br /> x = 120 + Math.sin(angle) * 30;<br /> y = 45 + Math.cos(angle) * 40;<br /> size = Math.round(40 - Math.sin(angle) * 40);<br /> var elementCenter = $(element[i]).width() / 2;<br /> var leftValue = (($list.width()/2) * x / 100 - elementCenter) + "px"<br /> $(element[i]).css("fontSize", size + "pt");<br /> $(element[i]).css("opacity",size/100);<br /> $(element[i]).css("zIndex" ,size);<br /> $(element[i]).css("left" ,leftValue);<br /> $(element[i]).css("top", y + "%");<br /> }<br /> offset += stepping;<br /> }<br /> });<br /> 希望本文所述对大家的jQuery程序设计有所帮助。
