Article classification of jquery 3D spherical navigation

Article classification of jquery 3D spherical navigation_jquery

WBOY

Release： 2016-05-16 18:23:39

Original

1338 people have browsed it

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:
Article classification of jquery 3D spherical navigation_jquery

HTML:

Copy code The code is as follows:

HTML

JavaScript

Ajax

Asp.net

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 = '

' arr[i][1] '

';
}
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"] 
] 
} 