本文實(shí)例講述了jQuery實(shí)現(xiàn)3D文字特效的方法。分享給大家供大家參考。具體如下：

這款基于jQuery的3D文字特效演示，不是真正的3D，是由多個(gè)文字形成的3D效果，如果首次加載網(wǎng)頁出錯(cuò)的話，請(qǐng)刷新一下頁面，當(dāng)然在使用中不會(huì)出現(xiàn)此問題。

jQuery 3D文字

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;

}

• ajax
• css
• design
• firefox
• flash
• html
• Devirtuoso
• jquery
• PHP
• SEO
• usability
• www
• web
• xhtml

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

}

});

希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的Java三维文字特效设计_jQuery实现3D文字特效的方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。