Articles in jquery3D spherical navigation _ jquery

Source: Internet
Author: User
The category title displays a 3D spherical effect. When you click the category title, a list of recommended articles corresponding to this category is displayed. A few days ago I wrote the article category of the 3D spherical navigation on the left. Here I will make a simple record of the Implementation Details.

Effect:
The category title displays a 3D spherical effect. When you click the category title, a list of recommended articles corresponding to this category is displayed.
Effect:




HTML:

The Code is as follows:





  • HTML

  • CSS

  • JavaScript

  • Ajax

  • Asp.net

  • C #

  • Debugging

  • Performance

  • Effecect




Core JS: dynamically generate a 3D spherical cloud + pop-up mode form-articlemap. js

The Code is as follows:


$ (Function (){
Var element = $ ('# list ');;
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"
((Elementpoliciuncs.css ("fontSize", size + "pt ");
Optional (elementpoliciuncs.css ("opacity", size/100 );
((Elementpoliciuncs.css ("zIndex", size );
Optional (elementpoliciuncs.css ("left", leftValue );
Optional (elementpoliciuncs.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 "effecect ":
Links = TrainLinks (Links. effecect );
Break;
}
CommonHelper. showNoBtnAlert (typName, links );
}
Function TrainLinks (arr ){
Var links = "This can be found, 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;
}


Auxiliary storage of the JS of the Recommendation article list (the recommended Article will be maintained by modifying this file in the future ):

The Code is as follows:


Var Links = {
HTML: [],
CSS: [["http://www.cnblogs.com/justinw/archive/2010/06/16/1758922.html", "creating 50 superb animation effects tutorial"],
JavaScript :[
["Http://www.cnblogs.com/justinw/archive/2009/11/27/1611728.html", "[original] AjaxControlToolkitTests one of the complete analysis of the Automatic Test Framework: Architecture"],
["Http://www.cnblogs.com/justinw/archive/2009/11/30/1613391.html", "[original] AjaxControlToolkitTests automatic test framework completely resolved II: Implementation (1)"],
["Http://www.cnblogs.com/justinw/archive/2009/12/02/1615382.html", "[JavaScript] optimizing performance with document. createDocumentFragment"],
],
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 custom CSS settings are also referenced here. For details, refer to the instance.
Download source code
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.