jQuery 3D文字特效

来源:转载

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
  5. <title>jQuery 3D文字</title> 
  6. <style type="text/css"> 
  7. body{ 
  8.     font-family: Arial, "MS Trebuchet", sans-serif; 
  9.     background-color: #111; 
  10. #list{ 
  11.     margin:0 auto; 
  12.     height:600px; 
  13.     width:600px; 
  14.     overflow:hidden; 
  15.     position:relative; 
  16.     background-color: #000; 
  17. }#list ul,#list li{ 
  18.     list-style:none; 
  19.     margin:0; 
  20.     padding:0; 
  21. #list a{ 
  22.     position:absolute; 
  23.     text-decoration: none; 
  24.     color:#666; 
  25. #list a:hover{ 
  26.     color:#ccc; 
  27. </style> 
  28. <script src="/ajaxjs/jquery1.3.2.js" type="text/javascript"></script> 
  29. </head> 
  30. <body> 
  31. <div id="list"> 
  32.     <ul> 
  33.                 <li><a href="#">ajax</a></li> 
  34.                 <li><a href="#">css</a></li> 
  35.                 <li><a href="#">design</a></li> 
  36.                 <li><a href="#">firefox</a></li> 
  37.                 <li><a href="#">flash</a></li> 
  38.                 <li><a href="#">html</a></li> 
  39.                 <li><a href="#">Devirtuoso</a></li> 
  40.                 <li><a href="#">jquery</a></li> 
  41.                 <li><a href="#">PHP</a></li> 
  42.                 <li><a href="#">SEO</a></li> 
  43.                 <li><a href="#">usability</a></li> 
  44.                 <li><a href="#">www</a></li> 
  45.                 <li><a href="#">web</a></li> 
  46.                 <li><a href="#">xhtml</a></li> 
  47.              
  48.             </ul> 
  49.         </div> 
  50. <script type="text/javascript"> 
  51. $(document).ready(function(){ 
  52.     var element = $('#list a');; 
  53.     var offset = 0;  
  54.     var stepping = 0.03; 
  55.     var list = $('#list'); 
  56.     var $list = $(list) 
  57.     $list.mousemove(function(e){ 
  58.         var topOfList = $list.eq(0).offset().top 
  59.         var listHeight = $list.height() 
  60.         stepping = (e.clientY - topOfList) /  listHeight * 0.2 - 0.1; 
  61.          
  62.     }); 
  63.      
  64.     for (var i = element.length - 1; i >= 0; i--) 
  65.     { 
  66.         element[i].elemAngle = i * Math.PI * 2 / element.length; 
  67.     } 
  68.      
  69.     setInterval(render, 20); 
  70. function render(){ 
  71.         for (var i = element.length - 1; i >= 0; i--){ 
  72.             var angle = element[i].elemAngle + offset; 
  73.             x = 120 + Math.sin(angle) * 30; 
  74.             y = 45 + Math.cos(angle) * 40; 
  75.             size = Math.round(40 - Math.sin(angle) * 40); 
  76.             var elementCenter = $(element[i]).width() / 2; 
  77.             var leftValue = (($list.width()/2) * x / 100 - elementCenter) + "px" 
  78.             $(element[i]).css("fontSize", size + "pt"); 
  79.             $(element[i]).css("opacity",size/100); 
  80.             $(element[i]).css("zIndex" ,size); 
  81.             $(element[i]).css("left" ,leftValue); 
  82.             $(element[i]).css("top", y + "%"); 
  83.         } 
  84.          
  85.         offset += stepping; 
  86.     } 
  87.      
  88. }); 
  89. </script> 
  90. </body> 
  91. </html> 

 


分享给朋友:
您可能感兴趣的文章:
随机阅读: