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程序设计有所帮助。