Article classification of jquery 3D spherical navigation_jquery

A few days ago, I wrote about the article classification of the 3D spherical navigation on the left. Here is a brief record of the implementation details.

Effect:
The category title presents a 3D spherical effect. When you click on the category title, a list of recommended articles corresponding to this category will pop up.
Screenshot of the effect:




HTML:

Copy code The code is as follows:

• HTML


• CSS


• JavaScript


• Ajax


• Asp.net


• C#


• Debugging


• Performance


• Architect< ;/a>

Core JS: Dynamically generate 3D spherical cloud pop-up modal form-articlemap.js

Copy code The code is as follows:

$(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 = "This can be available, but not yet! ";
if (arr.length > 0) {
links = '

';
}
for (i = 0, j = arr.length; i < j; i ) {
links = '
• ' arr[i][1] '
';
}
if (arr.length > 0) {
links = '

';
}
return links;
}

JS that assists in storing the list of recommended articles (in the future, this file will be modified to maintain recommended articles):

Copy code The code is as follows :

var Links = {
HTML: [],
CSS: [["http://www.cnblogs.com/justinw/archive/2010/06/16/ 1758922.html", "Tutorial on making 50 awesome animation effects"]],
JavaScript: [
["http://www.cnblogs.com/justinw/archive/2009/11/27/1611728 .html", "[Original] Complete analysis of AjaxControlToolkitTests automatic testing framework one: architecture"],
["http://www.cnblogs.com/justinw/archive/2009/11/30/1613391.html ", "[Original] Complete analysis of AjaxControlToolkitTests automatic testing framework Part 2: Implementation (1) "],
["http://www.cnblogs.com/justinw/archive/2009/12/02/1615382. html", "[JavaScript] Use document.createDocumentFragment to optimize performance"],
],
Ajax: [],
Aspnet: [],
CSharp: [],
.. ....
Performance: [
["http://www.cnblogs.com/justinw/archive/2009/11/26/1611397.html", "[Recommended] Front-end performance analysis tool: dynaTrace Ajax Edition"]
]
}

Others:
The Dialog of jQuery UI and some customized CSS settings are also quoted here. Please refer to the example for details.
Download source code

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn