jQuery 3D文字特效

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 <html> 
 <head> 
 <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
<title>jQuery 3D文字</title> 
 <style type="text/css"> 
 body{ 
     font-family: Arial, "MS Trebuchet", sans-serif; 
     background-color: #111; 
 } 
 #list{ 
      margin:0 auto; 
      height:600px; 
      width:600px; 
      overflow:hidden; 
      position:relative; 
      background-color: #000; 
  }#list ul,#list li{ 
      list-style:none; 
      margin:0; 
      padding:0; 
  } 
  #list a{ 
      position:absolute; 
      text-decoration: none; 
      color: #666; 
} 
 #list a:hover{ 
     color:#ccc; 
 } 
 </style> 
  <script src="jquery.js" type="text/javascript"></script> 
  </head> 
  <body> 
  <div id="list"> 
      <ul> 
                 <li><a href="#">ajax</a></li> 
                 <li><a href="#">css</a></li> 
                 <li><a href="#">design</a></li> 
                 <li><a href="#">firefox</a></li> 
                 <li><a href="#">flash</a></li> 
                 <li><a href="#">html</a></li> 
                 <li><a href="#">Devirtuoso</a></li> 
                 <li><a href="#">jquery</a></li> 
                 <li><a href="#">PHP</a></li> 
                 <li><a href="#">SEO</a></li> 
                 <li><a href="#">usability</a></li> 
                 <li><a href="#">www</a></li> 
                 <li><a href="#">web</a></li> 
                 <li><a href="#">xhtml</a></li> 
              
             </ul> 
         </div> 
 <script type="text/javascript"> 
 $(document).ready(function(){ 
     var element = $('#list a');; 
     var offset = 0;  
     var stepping = 0.03; 
     var list = $('#list'); 
     var $list = $(list) 
     $list.mousemove(function(e){ 
         var topOfList = $list.eq(0).offset().top 
         var listHeight = $list.height() 
         stepping = (e.clientY - topOfList) /  listHeight * 0.2 - 0.1; 
         
     }); 
      
     for (var i = element.length - 1; i >= 0; i--) 
      { 
          element[i].elemAngle = i * Math.PI * 2 / element.length; 
      } 
       
      setInterval(render, 20); 
  function render(){ 
          for (var i = element.length - 1; i >= 0; i--){ 
              var angle = element[i].elemAngle + offset; 
              x = 120 + Math.sin(angle) * 30; 
              y = 45 + Math.cos(angle) * 40; 
              size = Math.round(40 - Math.sin(angle) * 40); 
              var elementCenter = $(element[i]).width() / 2; 
              var leftValue = (($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>
posted on 2011-02-07 17:08 xylxq1925 阅读(276) 评论(0) 收藏举报