• 技术文章 >web前端 >js教程

    jquery 3D球状导航的文章分类_jquery

    2016-05-16 18:23:39原创655
    前几天写了左边这个3D球状导航的文章分类,这里对实现细节做个简单记录。

    效果:
    分类标题呈现3D球状效果,点击分类标题的时候,会弹出这个分类对应的推荐文章列表。
    效果截图:




    HTML:
    复制代码 代码如下:


    核心JS:动态生成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 = '
      ';
      }
      for (i = 0, j = arr.length; i < j; i++) {
      links += '
    • ' + arr[i][1] + '
    • ';
      }
      if (arr.length > 0) {
      links += '
    ';
    }
    return links;
    }

    辅助存储推荐文章列表的JS(未来通过修改这个文件来维护推荐文章):
    复制代码 代码如下:

    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", "[原创]AjaxControlToolkitTests自动测试框架完全解析之一:架构篇 "],
    ["http://www.cnblogs.com/justinw/archive/2009/11/30/1613391.html", "[原创]AjaxControlToolkitTests自动测试框架完全解析之二:实现篇(1) "],
    ["http://www.cnblogs.com/justinw/archive/2009/12/02/1615382.html", "[JavaScript] 使用document.createDocumentFragment优化性能 "],
    ],
    Ajax: [],
    Aspnet: [],
    CSharp: [],
    ......
    Performance: [
    ["http://www.cnblogs.com/justinw/archive/2009/11/26/1611397.html", "[推荐]前端性能分析工具:dynaTrace Ajax Edition"]
    ]
    }

    其他:
    这里还引用了jQuery UI的Dialog和一些自定义的CSS设置,具体参考实例即可。
    下载源代码
    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:jquery 3D 球状导航
    上一篇:JSON.parse 解析字符串出错的解决方法_javascript技巧 下一篇:location.href 在IE6中不跳转的解决方法与推荐使用代码_javascript技巧
    Web大前端开发直播班

    相关文章推荐

    • JavaScript经典基础详解之函数• 聊聊V8的内存管理与垃圾回收算法• 你能搞懂JS的this指向问题吗?看看这篇文章• 值得了解的几个实用JavaScript优化小技巧• JavaScript学习理解之JSON(总结分享)

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网