jquery 3D球狀導(dǎo)航的文章分類
更新時間:2010年07月06日 16:02:45 作者:
分類標(biāo)題呈現(xiàn)3D球狀效果,點(diǎn)擊分類標(biāo)題的時候,會彈出這個分類對應(yīng)的推薦文章列表。
前幾天寫了左邊這個3D球狀導(dǎo)航的文章分類,這里對實(shí)現(xiàn)細(xì)節(jié)做個簡單記錄。
效果:
分類標(biāo)題呈現(xiàn)3D球狀效果,點(diǎn)擊分類標(biāo)題的時候,會彈出這個分類對應(yīng)的推薦文章列表。
效果截圖:


HTML:
<div id="mainList">
<div id="list">
<ul>
<li><a class="HTML" onclick="ClickLink(this)" href="#">HTML</a></li>
<li><a class="CSS" onclick="ClickLink(this)" href="#">CSS</a></li>
<li><a class="JS" onclick="ClickLink(this)" href="#">JavaScript</a></li>
<li><a class="AJAX" onclick="ClickLink(this)" href="#">Ajax</a></li>
<li><a class="ASPNET" onclick="ClickLink(this)" href="#">Asp.net</a></li>
<li><a class="CSHARP" onclick="ClickLink(this)" href="#">C#</a></li>
<li><a class="DEBUG" onclick="ClickLink(this)" href="#">Debugging</a></li>
<li><a class="PERF" onclick="ClickLink(this)" href="#">Performance</a></li>
<li><a class="ARCHITERT" onclick="ClickLink(this)" href="#">Architect</a></li>
</ul>
</div>
核心JS:動態(tài)生成3D球狀云+彈出模式窗體-articlemap.js
$(function() {
var element = $('#list a'); ;
var offset = 0;
var stepping = 0.02;
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, 50);
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(15 - Math.sin(angle) * 15);
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;
}
});
function ClickLink(item) {
var typName = $(item).text();
var links = null;
switch (typName) {
case "HTML":
links = TrainLinks(Links.HTML);
break;
case "CSS":
links = TrainLinks(Links.CSS);
break;
case "JavaScript":
links = TrainLinks(Links.JavaScript);
break;
case "Ajax":
links = TrainLinks(Links.Ajax);
break;
case "Asp.net":
links = TrainLinks(Links.Aspnet);
break;
case "C#":
links = TrainLinks(Links.CSharp);
break;
case "Debugging":
links = TrainLinks(Links.Debugging);
break;
case "Performance":
links = TrainLinks(Links.Performance);
break;
case "Architect":
links = TrainLinks(Links.Architect);
break;
}
CommonHelper.showNoBtnAlert(typName, links);
}
function TrainLinks(arr) {
var links = "這個可以有,暫時還沒有!";
if (arr.length > 0) {
links = '<div><ul>';
}
for (i = 0, j = arr.length; i < j; i++) {
links += '<li><a target="_blank" href="' + arr[i][0] + '">' + arr[i][1] + '</a></li>';
}
if (arr.length > 0) {
links += '</ul></div>';
}
return links;
}
輔助存儲推薦文章列表的JS(未來通過修改這個文件來維護(hù)推薦文章):
var Links = {
HTML: [],
CSS: [["http://www.cnblogs.com/justinw/archive/2010/06/16/1758922.html", "制作50個超棒動畫效果教程"]],
JavaScript: [
["http://www.cnblogs.com/justinw/archive/2009/11/27/1611728.html", "[原創(chuàng)]AjaxControlToolkitTests自動測試框架完全解析之一:架構(gòu)篇 "],
["http://www.cnblogs.com/justinw/archive/2009/11/30/1613391.html", "[原創(chuàng)]AjaxControlToolkitTests自動測試框架完全解析之二:實(shí)現(xiàn)篇(1) "],
["http://www.cnblogs.com/justinw/archive/2009/12/02/1615382.html", "[JavaScript] 使用document.createDocumentFragment優(yōu)化性能 "],
],
Ajax: [],
Aspnet: [],
CSharp: [],
......
Performance: [
["http://www.cnblogs.com/justinw/archive/2009/11/26/1611397.html", "[推薦]前端性能分析工具:dynaTrace Ajax Edition"]
]
}
其他:
這里還引用了jQuery UI的Dialog和一些自定義的CSS設(shè)置,具體參考實(shí)例即可。
下載源代碼
效果:
分類標(biāo)題呈現(xiàn)3D球狀效果,點(diǎn)擊分類標(biāo)題的時候,會彈出這個分類對應(yīng)的推薦文章列表。
效果截圖:


HTML:
復(fù)制代碼 代碼如下:
<div id="mainList">
<div id="list">
<ul>
<li><a class="HTML" onclick="ClickLink(this)" href="#">HTML</a></li>
<li><a class="CSS" onclick="ClickLink(this)" href="#">CSS</a></li>
<li><a class="JS" onclick="ClickLink(this)" href="#">JavaScript</a></li>
<li><a class="AJAX" onclick="ClickLink(this)" href="#">Ajax</a></li>
<li><a class="ASPNET" onclick="ClickLink(this)" href="#">Asp.net</a></li>
<li><a class="CSHARP" onclick="ClickLink(this)" href="#">C#</a></li>
<li><a class="DEBUG" onclick="ClickLink(this)" href="#">Debugging</a></li>
<li><a class="PERF" onclick="ClickLink(this)" href="#">Performance</a></li>
<li><a class="ARCHITERT" onclick="ClickLink(this)" href="#">Architect</a></li>
</ul>
</div>
核心JS:動態(tài)生成3D球狀云+彈出模式窗體-articlemap.js
復(fù)制代碼 代碼如下:
$(function() {
var element = $('#list a'); ;
var offset = 0;
var stepping = 0.02;
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, 50);
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(15 - Math.sin(angle) * 15);
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;
}
});
function ClickLink(item) {
var typName = $(item).text();
var links = null;
switch (typName) {
case "HTML":
links = TrainLinks(Links.HTML);
break;
case "CSS":
links = TrainLinks(Links.CSS);
break;
case "JavaScript":
links = TrainLinks(Links.JavaScript);
break;
case "Ajax":
links = TrainLinks(Links.Ajax);
break;
case "Asp.net":
links = TrainLinks(Links.Aspnet);
break;
case "C#":
links = TrainLinks(Links.CSharp);
break;
case "Debugging":
links = TrainLinks(Links.Debugging);
break;
case "Performance":
links = TrainLinks(Links.Performance);
break;
case "Architect":
links = TrainLinks(Links.Architect);
break;
}
CommonHelper.showNoBtnAlert(typName, links);
}
function TrainLinks(arr) {
var links = "這個可以有,暫時還沒有!";
if (arr.length > 0) {
links = '<div><ul>';
}
for (i = 0, j = arr.length; i < j; i++) {
links += '<li><a target="_blank" href="' + arr[i][0] + '">' + arr[i][1] + '</a></li>';
}
if (arr.length > 0) {
links += '</ul></div>';
}
return links;
}
輔助存儲推薦文章列表的JS(未來通過修改這個文件來維護(hù)推薦文章):
復(fù)制代碼 代碼如下:
var Links = {
HTML: [],
CSS: [["http://www.cnblogs.com/justinw/archive/2010/06/16/1758922.html", "制作50個超棒動畫效果教程"]],
JavaScript: [
["http://www.cnblogs.com/justinw/archive/2009/11/27/1611728.html", "[原創(chuàng)]AjaxControlToolkitTests自動測試框架完全解析之一:架構(gòu)篇 "],
["http://www.cnblogs.com/justinw/archive/2009/11/30/1613391.html", "[原創(chuàng)]AjaxControlToolkitTests自動測試框架完全解析之二:實(shí)現(xiàn)篇(1) "],
["http://www.cnblogs.com/justinw/archive/2009/12/02/1615382.html", "[JavaScript] 使用document.createDocumentFragment優(yōu)化性能 "],
],
Ajax: [],
Aspnet: [],
CSharp: [],
......
Performance: [
["http://www.cnblogs.com/justinw/archive/2009/11/26/1611397.html", "[推薦]前端性能分析工具:dynaTrace Ajax Edition"]
]
}
其他:
這里還引用了jQuery UI的Dialog和一些自定義的CSS設(shè)置,具體參考實(shí)例即可。
下載源代碼
您可能感興趣的文章:
- jquery仿京東導(dǎo)航/仿淘寶商城左側(cè)分類導(dǎo)航下拉菜單效果
- 基于jquery的大眾點(diǎn)評,分類導(dǎo)航實(shí)現(xiàn)代碼
- JQuery 浮動導(dǎo)航欄實(shí)現(xiàn)代碼
- JQuery實(shí)現(xiàn)鼠標(biāo)滑過顯示導(dǎo)航下拉列表
- jquery 面包屑導(dǎo)航 具體實(shí)現(xiàn)
- jQuery實(shí)戰(zhàn)之仿淘寶商城左側(cè)導(dǎo)航效果
- jquery scrollTop方法根據(jù)滾動像素顯示隱藏頂部導(dǎo)航條
- jquery簡單實(shí)現(xiàn)鼠標(biāo)經(jīng)過導(dǎo)航條改變背景圖
- jQuery簡單實(shí)現(xiàn)仿京東分類導(dǎo)航層效果
相關(guān)文章
jQuery 學(xué)習(xí)第五課 Ajax 使用說明
關(guān)于ajax早已不是新鮮話題,而jQuery使ajax變得無比簡單。2010-05-05jquery tools系列 overlay 學(xué)習(xí)
接著上次scrollable的學(xué)習(xí),今天繼續(xù)jquery tools六大功能的第四個功能——overlay的學(xué)習(xí)。2009-09-09Jquery的Tabs內(nèi)容輪換效果實(shí)現(xiàn)代碼,幾行搞定
本篇文章主要是對Jquery的Tabs內(nèi)容輪換效果的實(shí)現(xiàn)代碼進(jìn)行了介紹。幾行代碼輕松搞定2014-02-02jQuery使用siblings獲取某元素所有同輩(兄弟姐妹)元素用法示例
這篇文章主要介紹了jQuery使用siblings獲取某元素所有同輩(兄弟姐妹)元素用法,結(jié)合簡單實(shí)例形式分析了siblings()函數(shù)獲取同輩元素的操作技巧,需要的朋友可以參考下2017-01-01jQuery插件FusionWidgets實(shí)現(xiàn)的AngularGauge圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionWidgets實(shí)現(xiàn)的AngularGauge圖效果,結(jié)合具體實(shí)例形式分析了jQuery使用FusionWidgets插件載入xml數(shù)據(jù)實(shí)現(xiàn)AngularGauge圖的相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03基于jquery用于查詢操作的實(shí)現(xiàn)代碼
通過javascript得到用戶操作改變url參數(shù)從而實(shí)現(xiàn)某些功能,如查詢(具體的查詢由服務(wù)器端代碼得到url中的參數(shù)組成查詢語句實(shí)現(xiàn))。2010-05-05