jQuery實(shí)現(xiàn)3D文字特效的方法
更新時(shí)間：2015年03月10日 11:34:17 作者：hcqenjoy
這篇文章主要介紹了jQuery實(shí)現(xiàn)3D文字特效的方法,通過(guò)鼠標(biāo)與css樣式來(lái)實(shí)現(xiàn)文字特效的技巧,需要的朋友可以參考下
本文實(shí)例講述了jQuery實(shí)現(xiàn)3D文字特效的方法。分享給大家供大家參考。具體如下：
這款基于jQuery的3D文字特效演示，不是真正的3D，是由多個(gè)文字形成的3D效果，如果首次加載網(wǎng)頁(yè)出錯(cuò)的話(huà)，請(qǐng)刷新一下頁(yè)面，當(dāng)然在使用中不會(huì)出現(xiàn)此問(wèn)題。
復(fù)制代碼 代碼如下:
<!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="/ajaxjs/jquery1.3.2.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>
<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="/ajaxjs/jquery1.3.2.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>
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)鼠標(biāo)懸停3d菜單展開(kāi)動(dòng)畫(huà)效果
- jquery+CSS3實(shí)現(xiàn)3D拖拽相冊(cè)效果
- 酷炫jQuery全屏3D焦點(diǎn)圖動(dòng)畫(huà)效果
- jQuery+CSS3實(shí)現(xiàn)3D立方體旋轉(zhuǎn)效果
- 基于jquery的3d效果實(shí)現(xiàn)代碼
- jquery實(shí)現(xiàn)的3D旋轉(zhuǎn)木馬特效代碼分享
- jquery實(shí)現(xiàn)疊層3D文字特效代碼分享
- jQuery實(shí)現(xiàn)圖像旋轉(zhuǎn)動(dòng)畫(huà)效果
- jQuery實(shí)現(xiàn)的產(chǎn)品自動(dòng)360度旋轉(zhuǎn)展示特效源碼分享
- jQuery實(shí)現(xiàn)炫麗的3d旋轉(zhuǎn)星空效果
相關(guān)文章
當(dāng)頁(yè)面打開(kāi)時(shí)我們需要執(zhí)行一些操作，下面為大家介紹三種不錯(cuò)的方法，大家可以參考下2014-06-06
日期函數(shù)在程序開(kāi)發(fā)中是一個(gè)重要的工具,js也提供了Date()函數(shù),如獲取當(dāng)前時(shí)間,當(dāng)前年月,已經(jīng)系統(tǒng)時(shí)間的毫秒數(shù)。2016-10-10
這篇文章主要介紹了jQuery必不可少的小技巧，這些小技巧就像是創(chuàng)建的快捷方式，可以幫助大家快速開(kāi)發(fā)，感興趣的小伙伴們可以參考一下2015-11-11
一個(gè)簡(jiǎn)單的jquery的多選下拉框(自寫(xiě))
想在網(wǎng)上找一個(gè)插件用用，可是，網(wǎng)上的插件看起來(lái)都比較雜亂，我參考了網(wǎng)上的一些插件，自己用jquery寫(xiě)了一個(gè)多選下拉框2014-05-05
這篇文章主要介紹了jquery淡入淡出效果簡(jiǎn)單實(shí)現(xiàn)方法,以完整實(shí)例形式分析了jQuery中fadeIn及fadeOut實(shí)現(xiàn)淡入淡出的相關(guān)技巧,需要的朋友可以參考下2016-01-01
下面小編就為大家?guī)?lái)一篇jquery屬性,遍歷,HTML操作方法詳解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09
本文給大家匯總介紹了jQuery的幾種判斷元素的方法，包括是否含有某 class、元素是否存在、是否 checked以及元素是否禁用，都是常用的方法，希望大家能夠喜歡2017-02-02
jQuery插件pagewalkthrough實(shí)現(xiàn)引導(dǎo)頁(yè)效果
這篇文章主要介紹了jQuery插件pagewalkthrough實(shí)現(xiàn)引導(dǎo)頁(yè)效果的方法和示例代碼，十分的詳細(xì)和實(shí)用，有需要的小伙伴可以參考下。2015-07-07
JQuery 選項(xiàng)卡效果(JS與HTML的分離)
基于JQuery實(shí)現(xiàn)的一個(gè)選項(xiàng)卡效果，重點(diǎn)體現(xiàn)在HTML里沒(méi)有內(nèi)聯(lián)事件處理程序，而是定義在js文件里，做到行為與結(jié)構(gòu)的分離。2010-04-04
webuploader模態(tài)框ueditor顯示問(wèn)題解決方法
這篇文章主要為大家詳細(xì)介紹了webuploader模態(tài)框ueditor顯示問(wèn)題的解決，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12