jQuery实现3D文字特效的方法.docVIP

这篇文章主要介绍了jQuery实现3D文字特效的方法,通过鼠标与css样式来实现文字特效的技巧,需要的朋友可以参考下

本文实例讲述了jQuery实现3D文字特效的方法。分享给大家供大家参考。具体如下：

这款基于jQuery的3D文字特效演示，不是真正的3D，是由多个文字形成的3D效果，如果首次加载网页出错的话，请刷新一下页面，当然在使用中不会出现此问题。

代码如下:

lt;!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Strict//ENgt;

lt;htmlgt;

lt;headgt;

lt;metahttp-equiv=Content-typecontent=text/html;charset=utf-8/gt;

lt;titlegt;jQuery3D文字lt;/titlegt;

lt;styletype=text/cssgt;

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;

}

lt;/stylegt;

lt;scriptsrc=/ajaxjs/jquery1.3.2.jstype=text/javascriptgt;lt;/scriptgt;

lt;/headgt;

lt;bodygt;

lt;divid=listgt;

lt;ulgt;

lt;ligt;lt;ahref=#gt;ajaxlt;/agt;lt;/ligt;

lt;ligt;lt;ahref=#gt;csslt;/agt;lt;/ligt;

lt;ligt;lt;ahref=#gt;designlt;/agt;lt;/ligt;

lt;ligt;lt;ahref=#gt;firefoxlt;/agt;lt;/ligt;

lt;ligt;lt;ahref=#gt;flashlt;/agt;lt;/ligt;

lt;ligt;lt;ahref=#gt;htmllt;/agt;lt;/ligt;

lt;ligt;lt;ahref=#gt;Devirtuosolt;/agt;lt;/ligt;

lt;ligt;lt;ahref=#gt;jquerylt;/agt;lt;/ligt;

lt;ligt;lt;ahref=#gt;PHPlt;/agt;lt;/ligt;

lt;ligt;lt;ahref=#gt;SEOlt;/agt;lt;/ligt;

lt;ligt;lt;ahref=#gt;usabilitylt;/agt;lt;/ligt;

lt;ligt;lt;ahref=#gt;wwwlt;/agt;lt;/ligt;

lt;ligt;lt;ahref=#gt;weblt;/agt;lt;/ligt;

lt;ligt;lt;ahref=#gt;xhtmllt;/agt;lt;/ligt;

lt;/ulgt;

lt;/divgt;

lt;scripttype=text/javascriptgt;

$(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;

}