HTML5 RPG游戏风格的技能树/路线图

什么叫精通网页开发，如何成为全栈工程师，且看此图。本图克隆自@352工作室，部分内容结合实际情况做了修改： http://wow.techbrood.com/fiddle/8623

h5, 路线图，学习树，职业路径规划

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 16404
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

//data part
(function() {
    (function(ns) {
        ns.data = {
            skills: [{
                    id: 1,
                    title: 'HTML',
                    description: '超文本标记语言（Hypertext Markup Language），用于构建网页的主体语言。',
                    rankDescriptions: [
                        '你了解如何创建一个简单的静态页面。', '你了解如何把页面链接在一起，设置多列布局，知道如何使用表单、表格和媒体（图片、视频、音频）.'
                    ],
                    links: [{
                        label: 'HTML.net Tutorials',
                        url: 'http://www.html.net/tutorials/html/'
                    }, {
                        label: 'Sublime Text 3，跨平台轻量级的编辑器，免费',
                        url: 'http://www.sublimetext.com/'
                    }, {
                        label: 'WebStorm，最智能的HTML5编辑器，很棒的语法提示功能，需要商业授权',
                        url: 'http://www.sublimetext.com/'
                    }],
                    maxPoints: 2,
                    stats: [{
                        title: '智力',
                        value: 1
                    }, {
                        title: '魅力',
                        value: 1
                    }, {
                        title: '力量',
                        value: 1
                    }]
                },

{
                    id: 2,
                    title: 'CSS',
                    dependsOn: [1],
                    links: [{
                        label: 'CSS Tutorials',
                        url: 'http://www.htmldog.com/guides/css/'
                    }, {
                        label: 'Can I use... (浏览器兼容性在线查询)',
                        url: 'http://caniuse.com/#cats=CSS'
                    }],
                    maxPoints: 2,
                    stats: [{
                        title: '魅力',
                        value: 3
                    }],
                    rankDescriptions: [
                        '你熟悉CSS格式化和盒子模型的基础知识。', '你熟悉媒体查询（media queries）和响应式设计，知道如何适配多种设备。'
                    ],
                    description: '级联样式表（CSS，也称层叠样式表）是一种用来为网页添加样式/风格的语言。CSS规则用来设定目标元素在HTML文档中的展示方式，如字体，颜色，间距和大小。',
                    talents: ['Stylish']
                }, {
                    id: 3,
                    title: 'CSS 工具',
                    dependsOn: [2],
                    links: [{
                        label: 'Sass vs. LESS',
                        url: 'http://css-tricks.com/sass-vs-less/'
                    }, {
                        label: 'LESS',
                        url: 'http://lesscss.org/'
                    }, {
                        label: 'Sass',
                        url: 'http://sass-lang.com/'
                    }, {
                        label: 'Stylus',
                        url: 'http://learnboost.github.io/stylus/'
                    }],
                    maxPoints: 2,
                    rankDescriptions: [
                        '你熟悉变量和嵌套语法的使用。', '你能使用一些高级工具如mix-ins，也会自己写一部分。'
                    ],
                    description: '像LESS和SASS这样的预处理器帮你编写更加结构化和高效的CSS代码，如使用变量、函数、循环和嵌套。',
                    stats: [{
                        title: '魅力',
                        value: 2
                    }, {
                        title: '敏捷度',
                        value: 1
                    }]
                }, {
                    id: 4,
                    title: '精通网页设计',
                    dependsOn: [2],
                    description: '你可以把设计想法实现为HTML文档和CSS样式。',
                    stats: [{
                        title: '魅力',
                        value: 10
                    }]
                }, {
                    id: 5,
                    title: 'jQuery 动效',
                    dependsOn: [4],
                    links: [{
                        label: 'Codecademy jQuery',
                        url: 'http://www.codecademy.com/tracks/jquery'
                    }, {
                        label: 'jQuery Category: Manipulation',
                        url: 'http://api.jquery.com/category/manipulation/'
                    }, {
                        label: 'jQuery Category: Effects',
                        url: 'http://api.jquery.com/category/effects/'
                    }],
                    maxPoints: 3,
                    rankDescriptions: [
                        '你熟悉文档对象模型（DOM）的操作 - 修改取值、内容、属性、样式以及动态创建元素等。', '你熟悉使用JS为网页添加基本的动画。', '你熟悉如何创建和添加定制化的网页效果。'
                    ],
                    description: 'jQuery提供了客户端侧网页元素操作的技术和方法。',
                    talents: ['Sizzlin'],
                    stats: [{
                        title: '魅力',
                        value: 2
                    }, {
                        title: '敏捷度',
                        value: 1
                    }]
                },

{
                    id: 6,
                    title: '搜索引擎优化(SEO)',
                    dependsOn: [1],
                    links: [{
                        label: 'Search Engine Optimization (Google)',
                        url: 'https://support.google.com/webmasters/answer/35291'
                    }, {
                        label: '谷歌 Webmaster Tools',
                        url: 'http://www.google.com/webmasters/tools/'
                    }, {
                        label: '百度 - 站长工具',
                        url: 'http://zhanzhang.baidu.com/'
                    }],
                    description: '在搜索引擎结果中影响网站或网页的排名、知名度的过程。',
                    stats: [{
                        title: '智力',
                        value: 2
                    }, {
                        title: '知识',
                        value: 1
                    }]
                }, {
                    id: 7,
                    title: '数据分析',
                    dependsOn: [6],
                    links: [{
                        label: '10个搜索引擎优化分析工具',
                        url: 'http://www.webgnomes.org/blog/10-seo-analysis-tools/'
                    }, {
                        label: '在GA中配置SEO数据',
                        url: 'https://support.google.com/analytics/answer/1308621?hl=en'
                    }, {
                        label: '使用GA SEO报告',
                        url: 'http://www.bing.com/toolbox/webmaster'
                    }, {
                        label: 'Baidu SEO 分析工具',
                        url: 'http://zhanzhang.baidu.com/optimization/index'
                    }],
                    description: '通过数据来分析网站性能，比如用户访问量，页面访问数据，来源，搜索关键词和跳出率。适时调整网站策略。',
                    stats: [{
                        title: '智力',
                        value: 1
                    }, {
                        title: '知识',
                        value: 2
                    }],
                    talents: ['Crafty']
                },

{
                    id: 8,
                    title: 'Javascript',
                    dependsOn: [1],
                    links: [{
                        label: 'JavaScript Tutorial',
                        url: 'http://www.htmldog.com/guides/javascript/'
                    }, {
                        label: 'Codecademy JavaScript',
                        url: 'http://www.codecademy.com/tracks/javascript'
                    }, {
                        label: 'JavaScript高级程序设计（第3版）',
                        url: 'http://item.jd.com/10951037.html'
                    }, {
                        label: 'Douglas Crockford on Javascript',
                        url: 'http://javascript.crockford.com/'
                    }],
                    description: 'JavaScript是一种用来为HTML添加动态效果的解释性脚本语言，比如隐藏某些元素，通过Ajax请求和服务器交互，图片轮播等。JS发展到现在，正逐步演进为系统语言，而不仅仅是依赖浏览器运行的嵌入式脚本，如NodeJS可用于搭建后台服务。',
                    stats: [{
                        title: '敏捷度',
                        value: 3
                    }]
                }, {
                    id: 9,
                    title: 'JS库和开发框架',
                    dependsOn: [8],
                    maxPoints: 2,
                    rankDescriptions: [
                        '你熟悉jQuery, MooTools, Prototype, Dojo, YUI, BootStrapy等JS库的使用', '你使用KnockoutJS, Ember.js, Backbone.js, AngularJS、React和VueJS来结构化(组件化)复杂的前端功能。'
                    ],
                    description: '一旦你熟悉JavaScript语言，有大量的库和框架可以提高你的开发效率。',
                    stats: [{
                        title: '敏捷度',
                        value: 2
                    }, {
                        title: '知识',
                        value: 1
                    }],
                    talents: ['Nimble']
                }, {
                    id: 10,
                    title: '精通前端开发',
                    dependsOn: [9],
                    stats: [{
                        title: '敏捷度',
                        value: 10
                    }]
                },

{
                    id: 11,
                    title: '服务器端编程',
                    dependsOn: [1],
                    links: [{
                        label: '服务器端脚本百科',
                        url: 'http://en.wikipedia.org/wiki/Server-side_scripting'
                    }],
                    description: '你了解如何使用PHP/Java/C++/Ruby/Python/NodeJS等系统语言（其中之一）来开发服务器端应用。',
                    stats: [{
                        title: '力量',
                        value: 3
                    }]
                }, {
                    id: 12,
                    title: '服务器端框架',
                    dependsOn: [11],
                    links: [{
                        label: 'Web应用程序框架的比较',
                        url: 'http://en.wikipedia.org/wiki/Comparison_of_web_application_frameworks'
                    }, {
                        label: 'Web开发服务器端编程',
                        url: 'http://en.wikipedia.org/wiki/Web_development#Server_side_coding'
                    }, {
                        label: '基于Java的开源CMS系统选择',
                        url: 'http://blog.csdn.net/iefreer/article/details/9166157'
                    }],
                    description: '开发人员可以使用快速开发框架来构建Web应用，常用框架包括Java体系的Spring/Struts/Hibernate(SSH)，PHP体系的Yii/CI/Laravel/Symphony2，Python体系的Django，Ruby体系的ROR。你还可以使用一些CMS系统来快速搭建具备完整功能的网站，如Wordpress/Drupal/Joomla，以及电子商务的Magento/OpenCart/Ecshop等。',
                    stats: [{
                        title: '力量',
                        value: 2
                    }, {
                        title: '知识',
                        value: 1
                    }],
                    talents: ['Beefcake']
                },

{
                    id: 13,
                    title: '数据库操作'
                        //, dependsOn: [1]
                        ,
                    links: [{
                        label: 'w3schools.com SQL Tutorial',
                        url: 'http://www.w3schools.com/sql/'
                    }, {
                        label: 'SQLZOO Interactive SQL Tutorial',
                        url: 'http://sqlzoo.net/wiki/'
                    }, {
                        label: 'Database Normalization Wiki',
                        url: 'https://en.wikipedia.org/wiki/Database_normalization'
                    }],
                    maxPoints: 2,
                    rankDescriptions: [
                        '你知道如何创建数据库和表', '你理解如何使用关系型数据库来组织数据。', '你知道何时需要关注No-SQL。'
                    ],
                    description: '数据库是存储、组织和检索数据的强大引擎。有多种数据库平台供选择（MySQL/Oracle/SQL Server/postgresql/Redis/Mango等）。最广泛使用的数据库语言是结构化查询语言（SQL）。',
                    stats: [{
                        title: '力量',
                        value: 3
                    }]
                }, {
                    id: 14,
                    title: '数据库管理进阶',
                    dependsOn: [13],
                    links: [{
                        label: '存储过程 Wiki',
                        url: 'http://en.wikipedia.org/wiki/Stored_procedure'
                    }, {
                        label: '用户自定义函数 Wiki',
                        url: 'http://en.wikipedia.org/wiki/User_defined_function'
                    }, {
                        label: '数据库挖掘 Wiki',
                        url: 'http://en.wikipedia.org/wiki/Database_tuning'
                    }, {
                        label: '性能监控和优化 (SQL Server)',
                        url: 'http://technet.microsoft.com/en-us/library/ms187830(v=sql.105).aspx'
                    }, {
                        label: 'Oracle数据库性能优化FAQ',
                        url: 'http://www.orafaq.com/wiki/Oracle_database_Performance_Tuning_FAQ'
                    }, {
                        label: '两款高性能并行计算引擎Storm和Spark比较',
                        url: 'http://blog.csdn.net/iefreer/article/details/32715153'
                    }],
                    maxPoints: 2,
                    rankDescriptions: [
                        '使用存储过程和自定义函数来提高SQL效率', '你能知道系统可能的性能瓶颈，并熟悉常用的监控调优方法。'
                    ],
                    description: '除了创建基本表和有关数据，数据库可以创建存储过程和用户自定义函数（UDF）以便可以用在SQL语句中。只是创建数据库是不够的，还需要进行优化和调整，以提高性能。知道何时需要分库分表，何时需要读写分离，何时需要引入No-SQL、分布式数据服务、离线大数据计算（Hadoop）以及实时流式计算（Spark/Storm）。',
                    stats: [{
                        title: '力量',
                        value: 2
                    }, {
                        title: '敏捷度',
                        value: 1
                    }],
                    talents: ['XXL Knapsack']
                },

{
                    id: 15,
                    title: '精通服务器端开发',
                    dependsOn: [12, 14],
                    description: '你有能力设计和构建应用程序的后端来有效地存储和检索数据。',
                    stats: [{
                        title: '力量',
                        value: 10
                    }]
                }, {
                    id: 16,
                    title: '服务访问控制和用户身份验证/授权',
                    dependsOn: [15],
                    links: [{
                        label: 'OpenID Wiki (authentication)',
                        url: 'http://en.wikipedia.org/wiki/OpenID'
                    }, {
                        label: 'OAuth Community',
                        url: 'http://oauth.net/'
                    }],
                    description: '用户验证授权是实现服务差异化以及网站访问安全控制的核心机制，如果有多个网站，还需要建立单点登录验证机制(SSO)，如果要提供开放接口，可使用OAuth2.0。',
                    stats: [{
                        title: '韧性',
                        value: 5
                    }],
                    talents: ['Truthseeker']
                }, {
                    id: 17,
                    title: 'Ajax和开放接口(API)',
                    dependsOn: [10, 15],
                    links: [{
                        label: 'AJAX (programming) Wiki',
                        url: 'http://en.wikipedia.org/wiki/Ajax_(programming)'
                    }, {
                        label: 'Web Service Wiki',
                        url: 'http://en.wikipedia.org/wiki/Web_service'
                    }, {
                        label: '表述性状态传递 (REST) Wiki',
                        url: 'http://en.wikipedia.org/wiki/Representational_state_transfer'
                    }, {
                        label: 'Yii2快速构建RESTful Web服务功能简介',
                        url: 'http://blog.csdn.net/iefreer/article/details/38277475'
                    }],
                    description: '使用Ajax请求可以使网页实现异步更新，即局部更新，而无需加载整个页面。使用开放接口提供在线服务可以建立系统应用生态环境，主流的Web服务技术有RESTful、SOAP和XML-RPC，其中由于RESTful的简洁性和可伸缩性，更适合在互联网领域使用。',
                    stats: [{
                        title: '力量',
                        value: 1
                    }, {
                        title: '敏捷度',
                        value: 1
                    }, {
                        title: '智力',
                        value: 1
                    }],
                    talents: ['Mindweaver']
                },

{
                    id: 18,
                    title: '用户需求发现',
                    maxPoints: 2,
                    rankDescriptions: [
                        '你知道如何设置问卷调查', '你会使用用户体验地图相关工具'
                    ],
                    links: [{
                        label: 'The anatomy of an experience map',
                        url: 'http://www.adaptivepath.com/ideas/the-anatomy-of-an-experience-map'
                    }],
                    description: '在进行任何设计之前，务必明确目标受众，理解用户真实的需求，发掘沉默用户的潜在需求，解决实际问题。你知道使用草图、卡片分类和用户体验地图。',
                    stats: [{
                        title: '知识',
                        value: 2
                    }, {
                        title: '魅力',
                        value: 1
                    }],
                    talents: ['Mindreader']
                }, {
                    id: 19,
                    title: '图形设计',
                    maxPoints: 2,
                    rankDescriptions: [
                        '你能够创建一个平衡的、信息清晰表达的布局', '你理解如何设计协调的、和内容合理搭配而独特的用户界面。'
                    ],
                    dependsOn: [18],
                    links: [{
                        label: 'Graphic Design Wiki',
                        url: 'http://en.wikipedia.org/wiki/Graphic_design'
                    }, {
                        label: 'Behance',
                        url: 'http://www.behance.net/'
                    }, {
                        label: 'User experience design Wiki',
                        url: 'http://en.wikipedia.org/wiki/User_experience_design'
                    }, {
                        label: 'Awwwards',
                        url: 'http://www.awwwards.com/'
                    }],
                    description: '平面设计是关于美学和可用性的学问。优秀的设计很诱人，也很容易理解。需要对颜色、字体、平衡、层次和留白的使用有上佳的感觉。',
                    stats: [{
                        title: '魅力',
                        value: 3
                    }],
                    talents: ['Artistic']
                }, {
                    id: 20,
                    title: '图形设计工具(PS/AI)',
                    dependsOn: [19],
                    links: [{
                        label: '100个图形设计师工具|平面设计类',
                        url: 'http://graphicdesignclasses.net/design-tools/'
                    }],
                    description: 'Photoshop和AI是设计师必须掌握的工具，PS/AI都可以用来布局、调色和创建界面特效，区别是PS是图像（Image）工具像素级的处理效果更为细腻，而AI是图形（Graph）工具用来创建矢量图。AI适合用来绘制矢量图，比如手机APP、网页设计的布局排版、按钮、图标等矢量元素。PS适合用来做平面广告、插画或后期处理等。',
                    stats: [{
                        title: '魅力',
                        value: 2
                    }, {
                        title: '智力',
                        value: 1
                    }]
                }, {
                    id: 21,
                    title: '产品原型(Axure/Balsamiq)',
                    dependsOn: [18],
                    links: [{
                        label: '使用快速原型法进行更好更快的产品设计',
                        url: 'http://www.smashingmagazine.com/2010/06/16/design-better-faster-with-rapid-prototyping/'
                    }, {
                        label: '16个原型和线框图工具',
                        url: 'http://www.sitepoint.com/tools-prototyping-wireframing/'
                    }, {
                        label: '移动应用界面原型构建工具，交互设计师的利器',
                        url: 'http://blog.csdn.net/iefreer/article/details/8681533'
                    }],
                    description: '快速原型建模对于验证产品概念、发现问题、收集反馈非常有帮助，同时原型也可以作为设计师理解产品用途的关键输入。通常由产品经理来创建原型。',
                    stats: [{
                        title: '知识',
                        value: 1
                    }, {
                        title: '智力',
                        value: 2
                    }],
                    talents: ['Conjurer']
                }, {
                    id: 22,
                    title: '精通用户体验设计',
                    dependsOn: [19, 21],
                    description: '你能够将项目需求转换为一个有吸引力的设计，以促进用户体验。',
                    stats: [{
                        title: '知识',
                        value: 1
                    }, {
                        title: '魅力',
                        value: 2
                    }]
                }, {
                    id: 23,
                    title: '可用性测试',
                    dependsOn: [22],
                    links: [{
                        label: '24个网站可用性测试工具大名单',
                        url: 'http://www.usefulusability.com/24-usability-testing-tools/'
                    }, {
                        label: '可用性测试 Wiki',
                        url: 'http://en.wikipedia.org/wiki/Usability_testing'
                    }],
                    description: '从用户实际使用的角度来测试网站。',
                    stats: [{
                        title: '魅力',
                        value: 1
                    }, {
                        title: '知识',
                        value: 2
                    }],
                    talents: ['Alchemist']
                },

{
                    id: 24,
                    title: '服务器运维',
                    links: [{
                        label: 'Web服务器比较 Wiki',
                        url: 'http://en.wikipedia.org/wiki/Comparison_of_web_server_software'
                    }, {
                        label: 'Apache mod_rewrite - Apache HTTP Server',
                        url: 'http://httpd.apache.org/docs/2.4/rewrite/'
                    }],
                    maxPoints: 2,
                    rankDescriptions: [
                        '你能搭建一个网页服务器如Apache/IIS/Nginx以及知道如何配置。', '你熟悉服务器端的URL重写工具如mod_rewrite。'
                    ],
                    description: '即使是最简单的Web应用程序也需要一个服务器来运行它们。学习管理和配置你的Web服务器将有助于网站稳定运行。',
                    stats: [{
                        title: '韧性',
                        value: 3
                    }],
                    talents: ['Stewardship']
                }, {
                    id: 25,
                    title: '应用发布',
                    dependsOn: [24],
                    links: [{
                        label: 'SSL证书安装 Installation',
                        url: 'http://www.sslshopper.com/ssl-certificate-installation.html'
                    }, {
                        label: '最小化负载 - Google Developers',
                        url: 'https://developers.google.com/speed/docs/best-practices/payload'
                    }, {
                        label: '跨域并行下载 - Google Developers',
                        url: 'https://developers.google.com/speed/docs/best-practices/rtt#ParallelizeDownloads'
                    }],
                    maxPoints: 2,
                    rankDescriptions: [
                        '你知道最小化JS/CSS代码，知道把静态资源独立出去，知道使用精灵图，知道使用字体图标以及SVG动画图标。', '你把敏感数据服务通过HTTPS协议提供并使用安全认证证书。'
                    ],
                    description: '在分享您的应用程序之前，请遵循服务器上的安全性和性能的最佳做法。这将有效降低服务器负载，提升用户体验以及有助于提高搜索引擎评价。',
                    stats: [{
                        title: '韧性',
                        value: 2
                    }, {
                        title: '敏捷度',
                        value: 1
                    }],
                    talents: ['Spectral Guide']
                },

{
                    id: 26,
                    title: '精通网页开发',
                    dependsOn: [4, 5, 10, 15, 22, 25],
                    links: [{
                        label: 'Web Development Wiki',
                        url: 'http://en.wikipedia.org/wiki/Web_development'
                    }],
                    description: '精通网页开发并非只是编写HTML页面，而是能够独立设计、编程和运维一个网站。',
                    stats: [{
                        title: '魅力',
                        value: 3
                    }, {
                        title: '敏捷度',
                        value: 3
                    }, {
                        title: '韧性',
                        value: 3
                    }, {
                        title: '智力',
                        value: 3
                    }, {
                        title: '力量',
                        value: 3
                    }, {
                        title: '知识',
                        value: 3
                    }],
                    talents: ['Demigod']
                }

]
        }
    })(namespace('tft.dnd'));
})();

//logic part
(function($, ko) {

(function(ns) {
        //VM for the entire Talent Tree page
        var TalentTree = ns.TalentTree = function(_e) {
                var e = _e || {};
                var self = function() {};

//constants for hash generation
                var asciiOffset = 96; //64 for caps, 96 for lower
                var hashDelimeter = '_';

var numPortraits = 22;

//Intro vs Talent Tree UI state
                self.isOpen = ko.observable(true);
                self.open = function() {
                    self.isOpen(true);
                };
                self.close = function() {
                    self.isOpen(false);
                };
                self.toggle = function() {
                    self.isOpen(!self.isOpen());
                };

//Mega skill list population
                self.skills = ko.observableArray(ko.utils.arrayMap(e.skills, function(item) {
                    return new Skill(item, self.skills);
                }));

//Avatar properties
                self.avatarName = ko.observable('Your Name');
                //level = total of all points spent
                self.level = ko.computed(function() {
                    var totalSkillPoints = 0;
                    ko.utils.arrayForEach(self.skills(), function(skill) {
                        totalSkillPoints += skill.points();
                    });
                    return totalSkillPoints + 1;
                });
                self.noPointsSpent = ko.computed(function() {
                    return !Boolean(ko.utils.arrayFirst(self.skills(), function(skill) {
                        return (skill.points() > 0);
                    }));
                });
                self.stats = ko.computed(function() {
                    //set some defaults
                    var totals = {
                        '魅力': 9,
                        '敏捷度': 9,
                        '韧性': 9,
                        '智力': 9,
                        '力量': 9,
                        '知识': 9
                    };
                    //get all the skill name/value pairs and add/create them, using the stat name as the index
                    ko.utils.arrayForEach(self.skills(), function(skill) {
                        var p = skill.points();
                        if (p > 0) ko.utils.arrayForEach(skill.stats, function(stat) {
                            var total = totals[stat.title] || 0;
                            total += stat.value * p; //multiply the stat value by the points spent on the skill
                            totals[stat.title] = total;
                        });
                    });
                    //Translate into a view-friendly array
                    var result = [];
                    for (var statName in totals) {
                        result.push({
                            title: statName,
                            value: totals[statName]
                        });
                    }
                    return result;
                });
                //String of unique characteristics, comma delimeted
                self.talentSummary = ko.computed(function() {
                    var a = [];
                    ko.utils.arrayForEach(self.skills(), function(skill) {
                        if (skill.hasPoints()) a = a.concat(skill.talents)
                    });
                    return a.join(', ');
                });
                //Portrait stuff
                self.portrait = ko.observable(Math.ceil(Math.random() * numPortraits));
                self.portraitURL = ko.computed(function() {
                    return '/uploads/150601/webmaster/img/portraits/portrait-' + self.portrait() + '.jpg';
                });
                self.choosePreviousPortrait = function() {
                    var n = self.portrait() - 1;
                    if (n < 1) n = numPortraits;
                    self.portrait(n);
                };
                self.chooseNextPortrait = function() {
                    var n = self.portrait() + 1;
                    if (n > numPortraits) n = 1;
                    self.portrait(n);
                };

//Utility functions
                self.newbMode = function() {
                    ko.utils.arrayForEach(self.skills(), function(skill) {
                        skill.points(0);
                    });
                };
                self.godMode = function() {
                    ko.utils.arrayForEach(self.skills(), function(skill) {
                        skill.points(skill.maxPoints);
                    });
                };

//UNUSED: Selected skill if we switch to an "info pane" layout
                /*self.selectedSkillId = ko.observable();
			self.selectedSkill = ko.computed(function(){
				return ko.utils.arrayFirst(self.skills(), function(skill){
					return skill.id == self.selectedSkillId();
				});
			});
			self.selectSkill = function(skill){
				self.selectedSkillId(skill.id);
			};
			self.deselectSkill = function(){
				self.selectedSkillId(null);
			};
			self.skillAllocations = ko.computed(function(){
				var a = [];
				ko.utils.arrayForEach(self.skills(), function(skill){
					if(skill.hasPoints()) a.push({
						id: skill.id
						, points: skill.points()
					});
				});
				return a;
			});*/

//Hash functions
                self.hash = ko.computed(function() {
                    var a = [];
                    //compile a flat list of skill ids and values
                    ko.utils.arrayForEach(self.skills(), function(skill) {
                        if (skill.hasPoints()) {
                            a.push(String.fromCharCode(skill.id + asciiOffset)); //convert skill id to letter of the alphabet
                            if (skill.hasMultiplePoints()) a.push(skill.points()); //only include points if they are > 1
                        }
                    });
                    return ['', a.join(''), self.portrait(), self.avatarName()].join(hashDelimeter);
                });
                //Update the skill tree based on a new hash
                function useHash(hash) {
                    if (hash) {
                        doUpdateHash = false;
                        self.newbMode();

var hashParts = hash.split(hashDelimeter);
                        if (hashParts[2]) self.portrait(Number(hashParts[2])); //use the segment after the second delimeter as the portrait index
                        if (hashParts[3]) self.avatarName(hashParts[3]); //use the segment after the third delimeter as the avatar name

var s = hashParts[1]; //use the segment after the first delimeter as the skill hash

var pairs = [];

//break the hash back down into skill/value pairs, one character at a time
                        var hashCharacters = s.split('');
                        for (var i = 0; i < hashCharacters.length; i++) {
                            if (!Number(hashCharacters[i])) { //if the current character is not a number,
                                var skill = getSkillById(hashCharacters[i].charCodeAt(0) - asciiOffset) //convert the character to a skill id and look it up
                                if (skill) {
                                    var points = Number(hashCharacters[i + 1]) || 1; //default to 1 point if the number is not specified next
                                    pairs.push({
                                        skill: skill,
                                        points: points
                                    })
                                }
                            }
                        }

//cycle through the whole list, adding points where possible, until the list is depleted
                        var pointsWereAllocated = true; //flag
                        while (pointsWereAllocated) {
                            pointsWereAllocated = false; //assume the list is depleted by default
                            ko.utils.arrayForEach(pairs, function(pair) {
                                if (!pair.wasAllocated && pair.skill.canAddPoints()) { //only add points once, and only where possible
                                    pair.skill.points(Math.min(pair.skill.maxPoints, pair.points)); //don't add more points than allowed
                                    pair.wasAllocated = true; //don't add this one again
                                    pointsWereAllocated = true;
                                }
                            });
                        }

doUpdateHash = true;
                    }
                };

//Hash thottling

//update the address bar when the hash changes
                function useLastHash() {
                    useHash(lastHash);
                }

window.onhashchange = function() {
                    self.useHash(window.location.hash.substr(1));
                };

//Launch
                var currentHash = window.location.hash.substr(1);
                self.isOpen(currentHash != ''); //If there is a hash, open the skill tree by default
                self.useHash(currentHash);

return self;
            }
            //VM for individual skills
        var Skill = ns.Skill = function(_e, allSkills) {
                var e = _e || {};
                var self = function() {};

//Basic properties
                self.id = e.id || 0;
                self.title = e.title || 'Unknown Skill';
                self.description = e.description;
                self.maxPoints = e.maxPoints || 1;
                self.points = ko.observable(e.points || 0);
                self.links = ko.utils.arrayMap(e.links, function(item) {
                    return new Link(item);
                });
                self.dependencies = ko.observableArray([]);
                self.dependents = ko.observableArray([]);
                self.stats = e.stats || [];
                self.rankDescriptions = e.rankDescriptions || [];
                self.talents = e.talents || [];

//Computed values
                self.hasDependencies = ko.computed(function() {
                    return self.dependencies().length > 0;
                });
                self.dependenciesFulfilled = ko.computed(function() {
                    var result = true;
                    ko.utils.arrayForEach(self.dependencies(), function(item) {
                        if (!item.hasPoints()) result = false;
                    });
                    return result;
                });
                self.dependentsUsed = ko.computed(function() {
                    var result = false;
                    ko.utils.arrayForEach(self.dependents(), function(item) {
                        if (item.hasPoints()) result = true;
                    });
                    return result;
                });
                self.hasPoints = ko.computed(function() {
                    return self.points() > 0;
                });
                self.hasMultiplePoints = ko.computed(function() {
                    return self.points() > 1;
                });
                self.hasMaxPoints = ko.computed(function() {
                    return self.points() >= self.maxPoints;
                });
                self.canAddPoints = ko.computed(function() {
                    return self.dependenciesFulfilled() && !self.hasMaxPoints();
                });
                self.canRemovePoints = ko.computed(function() {
                    //Only allow points to be removed if:
                    //	(A) There are dependents being used but more than one point spent here OR
                    //	(B) There are NO dependents being used and any number of points spent here
                    return (self.dependentsUsed() && self.hasMultiplePoints()) || (!self.dependentsUsed() && self.hasPoints());
                });
                //Summarize what the user needs to unlock this skill (if anything)
                self.helpMessage = ko.computed(function() {
                    if (!self.dependenciesFulfilled()) {
                        var s = [];
                        ko.utils.arrayForEach(self.dependencies(), function(item) {
                            if (!item.hasMaxPoints()) s.push(item.title);
                        });
                        return '学习 ' + prettyJoin(s) + ' 来解锁。'
                    } else if (self.canAddPoints()) {
                        return '点击添加技能点！';
                    }
                    return '';
                });
                self.talentSummary = ko.computed(function() {
                    return self.talents.join(', ');
                });
                self.currentRankDescription = ko.computed(function() {
                    return self.rankDescriptions[self.points() - 1];
                });
                self.nextRankDescription = ko.computed(function() {
                    return self.rankDescriptions[self.points()];
                });

//Methods
                self.addPoint = function() {
                    if (self.canAddPoints()) self.points(self.points() + 1);
                }
                self.removePoint = function() {
                    if (self.canRemovePoints()) self.points(self.points() - 1);
                }

return self;
            }
            //VM for a simple hyperlink
        var Link = ns.Link = function(_e) {
            var e = _e || {};
            var self = function() {};

//Basic properties
            self.label = e.label || (e.url || 'Learn more');
            self.url = e.url || 'javascript:void(0)';

return self;
        }
    })(namespace('tft.dnd'));

$(function() {

if (isInvalidIEVersion())
            return;

var vm = new tft.dnd.TalentTree(tft.dnd.data); //Make a new Talent Tree VM based on the data in tft.dnd.data.js
        vm.isOpen(true);
        ko.applyBindings(vm);

//Allow a split second for binding before turning on animated transitions for the UI
        setTimeout(function() {
            $('.page').addClass('animated');
        }, 50);
    });

})(window.jQuery, window.ko);

编译

CSS

/*---------------------------------------------------
    LESS Elements 0.9
  ---------------------------------------------------
    A set of useful LESS mixins
    More info at: http://lesselements.com
  ---------------------------------------------------*/

.ltIE9-show {
    display: none;
}
.ltIE9 .ltIE9-show {
    display: block;
}
.ltIE9 .ltIE9-hide {
    display: none;
}
.ltIE9-warning {
    text-align: center;
    padding: 100px 20px;
}
.ltIE9-warning p {
    margin-top: 0.5em;
}
.logo {
    display: block;
    width: 667px;
    height: 257px;
    margin: 0 auto;
}
html {
    overflow-y: scroll;
}
body {
    margin: 0;
    padding: 0;
    color: #eee;
    background: #000 url(/uploads/150601/webmaster/img/bg.jpg) top center no-repeat;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 1.5em;
}
header {
    position: relative;
    z-index: 20;
    font-size: 18px;
    margin: 0 auto;
    text-align: center;
}
header .logo {
    position: absolute;
    left: 50%;
    margin-left: -310px;
    margin-top: 100px;
    cursor: pointer;
}
.page.animated header .logo {
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.page.open header .logo {
    -webkit-transform: scale(0.4);
    -moz-transform: scale(0.4);
    -o-transform: scale(0.4);
    -ms-transform: scale(0.4);
    transform: scale(0.4);
    margin-left: -610px;
    margin-top: -50px;
}
button {
    border: 1px solid #fbf287;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 6px 11px #000;
    -moz-box-shadow: 0 6px 11px #000;
    box-shadow: 0 6px 11px #000;
    background: #debd4c;
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #c38f1f), color-stop(1, #faed7c));
    background: -ms-linear-gradient(bottom, #c38f1f, #faed7c);
    background: -moz-linear-gradient(center bottom, #c38f1f 0%, #faed7c 100%);
    background: -o-linear-gradient(#faed7c, #c38f1f);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#faed7c', endColorstr='#c38f1f', GradientType=0);
    font-weight: bold;
    font-size: 1.5em;
    line-height: 1em;
    padding: 0.5em 0.75em;
    cursor: pointer;
    color: #510;
}
img {
    border: 0 none;
}
a {
    color: #fe9;
}
hr {
    border: 0;
    height: 1px;
    background: #333;
}
h2,
h3,
.h2,
.h3 {
    line-height: 1.25em;
    font-weight: normal;
    margin: 0;
}
h2,
.h2 {
    font-size: 2em;
}
h3,
.h3 {
    font-size: 1.5em;
    margin-bottom: 0.25em;
}
input.h2 {
    display: block;
    border: 1px solid black;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 0.125em 0.25em;
    margin: -0.125em -0.25em;
    background: transparent;
    color: white;
    max-width: 100%;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
ul {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
}
li {
    margin: 0;
    padding: 0;
}
.hide {
    display: none;
}
.page {
    margin: 0 auto;
    position: relative;
    width: 910px;
}
.talent-tree {
    width: 100%;
    height: 510px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: absolute;
    z-index: 10;
}
.page.animated .talent-tree {
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.page.open .talent-tree {
    -moz-opacity: 1;
    -khtml-opacity: 1;
    -webkit-opacity: 1;
    opacity: 1;
    -ms-filter: progid: DXImageTransform.Microsoft.Alpha(opacity=100);
    filter: alpha(opacity=100);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}
.skill {
    width: 80px;
    height: 80px;
    position: absolute;
}
.skill .icon-container {
    position: absolute;
    background: black;
    width: 60px;
    height: 60px;
    padding: 5px;
    top: 5px;
    left: 5px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 6px 11px #000;
    -moz-box-shadow: 0 6px 11px #000;
    box-shadow: 0 6px 11px #000;
    overflow: hidden;
}
.skill .icon {
    width: 100%;
    height: 100%;
    background: url(/uploads/150601/webmaster/img/icon-sprite.png) no-repeat top left;
    -moz-opacity: 0.35;
    -khtml-opacity: 0.35;
    -webkit-opacity: 0.35;
    opacity: 0.35;
    -ms-filter: progid: DXImageTransform.Microsoft.Alpha(opacity=35);
    filter: alpha(opacity=35);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.skill .frame {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(/uploads/150601/webmaster/img/sprite.png) no-repeat top left;
}
.skill .frame:hover .tool-tip {
    visibility: visible;
    -moz-opacity: 1;
    -khtml-opacity: 1;
    -webkit-opacity: 1;
    opacity: 1;
    -ms-filter: progid: DXImageTransform.Microsoft.Alpha(opacity=100);
    filter: alpha(opacity=100);
    -webkit-transition: all 0.3s 0.3s ease-out;
    -moz-transition: all 0.3s 0.3s ease-out;
    -o-transition: all 0.3s 0.3s ease-out;
    transition: all 0.3s 0.3s ease-out;
}
.skill .hit-area {
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 2;
}
.skill.can-add-points .frame {
    background-position: -80px top;
}
.skill.can-add-points .skill-dependency {
    -moz-opacity: 1;
    -khtml-opacity: 1;
    -webkit-opacity: 1;
    opacity: 1;
    -ms-filter: progid: DXImageTransform.Microsoft.Alpha(opacity=100);
    filter: alpha(opacity=100);
}
.skill.has-points .icon {
    -moz-opacity: 1;
    -khtml-opacity: 1;
    -webkit-opacity: 1;
    opacity: 1;
    -ms-filter: progid: DXImageTransform.Microsoft.Alpha(opacity=100);
    filter: alpha(opacity=100);
}
.skill.has-max-points .frame {
    background-position: -160px top;
}
.skill.has-max-points .skill-dependency {
    -moz-opacity: 1;
    -khtml-opacity: 1;
    -webkit-opacity: 1;
    opacity: 1;
    -ms-filter: progid: DXImageTransform.Microsoft.Alpha(opacity=100);
    filter: alpha(opacity=100);
}
.skill .skill-points {
    position: absolute;
    z-index: 1;
    bottom: 5px;
    right: 5px;
    color: white;
    font-size: 11px;
    line-height: 1em;
    width: 19px;
    text-align: center;
}
.skill .tool-tip {
    visibility: hidden;
    -moz-opacity: 0;
    -khtml-opacity: 0;
    -webkit-opacity: 0;
    opacity: 0;
    -ms-filter: progid: DXImageTransform.Microsoft.Alpha(opacity=0);
    filter: alpha(opacity=0);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    background: #000;
    position: absolute;
    z-index: 3;
    top: 5px;
    left: 80px;
    width: 300px;
    padding: 10px;
    -webkit-box-shadow: 0 6px 11px #000;
    -moz-box-shadow: 0 6px 11px #000;
    box-shadow: 0 6px 11px #000;
    border: 1px solid #333;
}
.skill .tool-tip .current-rank-description {
    color: #fc3;
}
.skill .tool-tip .next-rank-description {
    -moz-opacity: 0.35;
    -khtml-opacity: 0.35;
    -webkit-opacity: 0.35;
    opacity: 0.35;
    -ms-filter: progid: DXImageTransform.Microsoft.Alpha(opacity=35);
    filter: alpha(opacity=35);
    color: #fc3;
}
.skill .tool-tip .talent-summary {
    color: #fc3;
}
.skill .tool-tip .help-message {
    color: #c00;
}
.skill .tool-tip .help-message.positive {
    color: #390;
}
.skill .skill-dependency {
    position: absolute;
    display: block;
    bottom: 73px;
    left: 50%;
    -moz-opacity: 0.35;
    /**************************************************
	DEPENDENCY ARROWS
**************************************************/
    
    -khtml-opacity: 0.35;
    -webkit-opacity: 0.35;
    opacity: 0.35;
    -ms-filter: progid: DXImageTransform.Microsoft.Alpha(opacity=35);
    filter: alpha(opacity=35);
    pointer-events: none;
    background: url(/uploads/150601/webmaster/img/connection-sprite.png) no-repeat top left;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
[data-skill-id="2"] .skill-dependency {
    margin-left: -15px;
    width: 350px;
    height: 60px;
    background-position: -285px -10px;
}
[data-skill-id="3"] .skill-dependency,
[data-skill-id="5"] .skill-dependency,
[data-skill-id="20"] .skill-dependency,
[data-skill-id="23"] .skill-dependency {
    margin-left: 15px;
    width: 60px;
    height: 40px;
    background-position: -740px -10px;
    margin-bottom: -50px;
}
[data-skill-id="4"] .skill-dependency {
    margin-left: -20px;
    width: 40px;
    height: 190px;
    background-position: 0 -10px;
}
[data-skill-id="7"] .skill-dependency,
[data-skill-id="9"] .skill-dependency,
[data-skill-id="10"] .skill-dependency,
[data-skill-id="12"] .skill-dependency,
[data-skill-id="14"] .skill-dependency,
[data-skill-id="25"] .skill-dependency {
    margin-left: -20px;
    width: 40px;
    height: 70px;
    background-position: 0 -210px;
}
[data-skill-id="15"] .skill-dependency,
[data-skill-id="22"] .skill-dependency {
    margin-left: -60px;
    width: 120px;
    height: 80px;
    background-position: -160px 10px;
}
[data-skill-id="16"] .skill-dependency {
    margin-left: -85px;
    width: 60px;
    height: 40px;
    background-position: -640px -10px;
    margin-bottom: -50px;
}
[data-skill-id="17"] .skill-dependency {
    margin-left: -85px;
    width: 150px;
    height: 40px;
    background-position: -640px -10px;
    margin-bottom: -50px;
}
[data-skill-id="19"] .skill-dependency {
    margin-left: -20px;
    width: 120px;
    height: 80px;
    background-position: -40px 10px;
}
[data-skill-id="26"] .skill-dependency {
    margin-left: -310px;
    width: 720px;
    height: 200px;
    background-position: -60px -90px;
}
[data-skill-id="10"] .tool-tip,
[data-skill-id="11"] .tool-tip,
[data-skill-id="12"] .tool-tip,
[data-skill-id="13"] .tool-tip,
[data-skill-id="14"] .tool-tip,
[data-skill-id="15"] .tool-tip,
[data-skill-id="16"] .tool-tip,
[data-skill-id="10"] .tool-tip,
[data-skill-id="17"] .tool-tip,
[data-skill-id="24"] .tool-tip,
[data-skill-id="25"] .tool-tip {
    left: -320px;
}
.skill[data-skill-id="1"] {
    left: 440px;
    top: 10px;
}
.skill[data-skill-id="1"] .icon {
    background-position: -240px 0px;
}
.skill[data-skill-id="2"] {
    left: 320px;
    top: 135px;
}
.skill[data-skill-id="2"] .icon {
    background-position: -240px -60px;
}
.skill[data-skill-id="3"] {
    left: 220px;
    top: 135px;
}
.skill[data-skill-id="3"] .icon {
    background-position: -420px 0px;
}
.skill[data-skill-id="4"] {
    left: 320px;
    top: 385px;
}
.skill[data-skill-id="4"] .icon {
    background-position: -120px -120px;
}
.skill[data-skill-id="5"] {
    left: 220px;
    top: 385px;
}
.skill[data-skill-id="5"] .icon {
    background-position: 0px -120px;
}
.skill[data-skill-id="6"] {
    left: 400px;
    top: 135px;
}
.skill[data-skill-id="6"] .icon {
    background-position: -360px 0px;
}
.skill[data-skill-id="7"] {
    left: 400px;
    top: 260px;
}
.skill[data-skill-id="7"] .icon {
    background-position: 0px 0px;
}
.skill[data-skill-id="8"] {
    left: 480px;
    top: 135px;
}
.skill[data-skill-id="8"] .icon {
    background-position: -240px -120px;
}
.skill[data-skill-id="9"] {
    left: 480px;
    top: 260px;
}
.skill[data-skill-id="9"] .icon {
    background-position: -300px 0px;
}
.skill[data-skill-id="10"] {
    left: 480px;
    top: 385px;
}
.skill[data-skill-id="10"] .icon {
    background-position: -120px -180px;
}
.skill[data-skill-id="11"] {
    left: 640px;
    top: 135px;
}
.skill[data-skill-id="11"] .icon {
    background-position: -60px -240px;
}
.skill[data-skill-id="12"] {
    left: 640px;
    top: 260px;
}
.skill[data-skill-id="12"] .icon {
    background-position: -60px -300px;
}
.skill[data-skill-id="13"] {
    left: 720px;
    top: 135px;
}
.skill[data-skill-id="13"] .icon {
    background-position: -300px -120px;
}
.skill[data-skill-id="14"] {
    left: 720px;
    top: 260px;
}
.skill[data-skill-id="14"] .icon {
    background-position: -300px -180px;
}
.skill[data-skill-id="15"] {
    left: 680px;
    top: 385px;
}
.skill[data-skill-id="15"] .icon {
    background-position: -120px -60px;
}
.skill[data-skill-id="16"] {
    left: 780px;
    top: 385px;
}
.skill[data-skill-id="16"] .icon {
    background-position: -180px -120px;
}
.skill[data-skill-id="17"] {
    left: 580px;
    top: 385px;
}
.skill[data-skill-id="17"] .icon {
    background-position: -300px -60px;
}
.skill[data-skill-id="18"] {
    left: 140px;
    top: 135px;
}
.skill[data-skill-id="18"] .icon {
    background-position: -360px -300px;
}
.skill[data-skill-id="19"] {
    left: 100px;
    top: 260px;
}
.skill[data-skill-id="19"] .icon {
    background-position: -240px -180px;
}
.skill[data-skill-id="20"] {
    left: 0px;
    top: 260px;
}
.skill[data-skill-id="20"] .icon {
    background-position: -360px -60px;
}
.skill[data-skill-id="21"] {
    left: 180px;
    top: 260px;
}
.skill[data-skill-id="21"] .icon {
    background-position: -360px -120px;
}
.skill[data-skill-id="22"] {
    left: 140px;
    top: 385px;
}
.skill[data-skill-id="22"] .icon {
    background-position: -120px -240px;
}
.skill[data-skill-id="23"] {
    left: 40px;
    top: 385px;
}
.skill[data-skill-id="23"] .icon {
    background-position: -480px 0px;
}
.skill[data-skill-id="24"] {
    left: 840px;
    top: 135px;
}
.skill[data-skill-id="24"] .icon {
    background-position: -420px -180px;
}
.skill[data-skill-id="25"] {
    left: 840px;
    top: 260px;
}
.skill[data-skill-id="25"] .icon {
    background-position: -360px -180px;
}
.skill[data-skill-id="26"] {
    left: 440px;
    top: 520px;
}
.skill[data-skill-id="26"] .icon {
    background-position: -120px 0px;
}
.avatar {
    position: absolute;
    width: 380px;
    top: 525px;
    left: 50%;
    margin-left: -425px;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    -webkit-opacity: 0;
    opacity: 0;
    -ms-filter: progid: DXImageTransform.Microsoft.Alpha(opacity=0);
    filter: alpha(opacity=0);
}
.page.animated .avatar {
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.page.open .avatar {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    -webkit-opacity: 1;
    opacity: 1;
    -ms-filter: progid: DXImageTransform.Microsoft.Alpha(opacity=100);
    filter: alpha(opacity=100);
}
.avatar .portrait {
    background: url(/uploads/150601/webmaster/img/avatar-frame.png) top left no-repeat;
    position: absolute;
    top: 15px;
    width: 140px;
    height: 140px;
    pointer-events: none;
}
.avatar .portrait img {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    overflow: hidden;
    margin: 10px 16px 16px 16px;
    width: 108px;
    height: 108px;
}
.avatar .portrait-controls {
    position: absolute;
    top: 135px;
    width: 140px;
    text-align: center;
    -moz-opacity: 0.35;
    -khtml-opacity: 0.35;
    -webkit-opacity: 0.35;
    opacity: 0.35;
    -ms-filter: progid: DXImageTransform.Microsoft.Alpha(opacity=35);
    filter: alpha(opacity=35);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.avatar .portrait-controls button {
    padding: 0 12px 3px;
    -webkit-border-top-right-radius: 0;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-top-left-radius: 0;
    -moz-border-radius-topright: 0;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-topleft: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 0;
    -moz-background-clip: padding-box;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    margin: 3px 1px;
}
.avatar:hover .portrait-controls {
    -moz-opacity: 1;
    -khtml-opacity: 1;
    -webkit-opacity: 1;
    opacity: 1;
    -ms-filter: progid: DXImageTransform.Microsoft.Alpha(opacity=100);
    filter: alpha(opacity=100);
}
.avatar:hover input.h2 {
    border: 1px solid #444;
    outline-width: 0;
    background: #111;
}
.avatar .details {
    padding: 20px 20px 20px 30px;
    margin-left: 120px;
    border: 1px solid #fc6;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background: black;
    -webkit-box-shadow: 0 6px 11px #000;
    -moz-box-shadow: 0 6px 11px #000;
    box-shadow: 0 6px 11px #000;
    min-height: 115px;
}
.avatar .details .talent-summary {
    color: #fc3;
}
.sign-off {
    position: absolute;
    width: 310px;
    top: 525px;
    left: 50%;
    margin-left: 105px;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    -webkit-opacity: 0;
    opacity: 0;
    -ms-filter: progid: DXImageTransform.Microsoft.Alpha(opacity=0);
    filter: alpha(opacity=0);
    padding-bottom: 100px;
}
.page.animated .sign-off {
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.page.open .sign-off {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    -webkit-opacity: 1;
    opacity: 1;
    -ms-filter: progid: DXImageTransform.Microsoft.Alpha(opacity=100);
    filter: alpha(opacity=100);
}
.sign-off .logo-352 {
    display: block;
    float: left;
}
.sign-off ul {
    margin-bottom: 20px;
}
.start-helper {
    background: url(/uploads/150601/webmaster/img/red-arrow.png) no-repeat left center;
    padding-left: 55px;
    position: absolute;
    top: 30px;
    left: 530px;
    -moz-opacity: 0;
    -khtml-opacity: 0;
    -webkit-opacity: 0;
    opacity: 0;
    -ms-filter: progid: DXImageTransform.Microsoft.Alpha(opacity=0);
    filter: alpha(opacity=0);
}
.start-helper.active {
    -moz-opacity: 1;
    -khtml-opacity: 1;
    -webkit-opacity: 1;
    opacity: 1;
    -ms-filter: progid: DXImageTransform.Microsoft.Alpha(opacity=100);
    filter: alpha(opacity=100);
}

HTML

<div class="ltIE9-hide">
    <header>全栈Web开发人员技术路线图</header>
    <div class="page">
        <div class="talent-tree">
            <h2 class="start-helper" data-bind="css:{active:noPointsSpent}">开始吧!</h2>
            
            
            <div data-bind="css: { 'can-add-points': canAddPoints, 'has-points': hasPoints, 'has-max-points': hasMaxPoints }, attr: { 'data-skill-id': id }" class="skill">
                <div data-bind="css: { active: dependenciesFulfilled }" class="skill-dependency"></div>
            </div>
            
            
            
            <div data-bind="css: { 'can-add-points': canAddPoints, 'has-points': hasPoints, 'has-max-points': hasMaxPoints }, attr: { 'data-skill-id': id }" class="skill">
                <div class="icon-container">
                    <div class="icon"></div>
                </div>
                <div class="frame">
                    <div class="tool-tip">
                        <h3 data-bind="text: title" class="skill-name"></h3>
                        <div data-bind="html: description" class="skill-description"></div>
                        <ul class="skill-links">
                            
                            <li>
                                <a data-bind="attr: { href: url }, click: function(){ 
                                        _gaq.push(['_trackEvent',$parent.title, label, url]);
                                        return true;
                                        }, text: label" target="_blank"></a>
                            </li>
                            
                        </ul>
                        <hr data-bind="visible: currentRankDescription() || nextRankDescription()">
                        <div data-bind="if: currentRankDescription" class="current-rank-description">当前级别: <span data-bind="    text: currentRankDescription"></span>
                        </div>
                        <div data-bind="if: nextRankDescription" class="next-rank-description">下一级别: <span data-bind=" text: nextRankDescription"></span>
                        </div>
                        <hr>
                        <ul class="stats">
                            
                            <li><span class="value">+<span data-bind="text: value"></span></span> <span data-bind=" text: title" class="title"></span>
                            </li>
                            
                        </ul>
                        
                        <div class="talent-summary">Grants <span data-bind="text: talentSummary"></span>
                        </div>
                        
                        <div data-bind="text: helpMessage, css:{positive: dependenciesFulfilled}" class="help-message"></div>
                    </div>
                    <div class="skill-points"><span data-bind="text: points" class="points"></span>/<span data-bind="   text: maxPoints" class="max-points"></span>
                    </div>
                    <div data-bind="click: addPoint, rightClick: removePoint" class="hit-area"></div>
                </div>
            </div>
            
        </div>
        <div class="avatar">
            <div class="portrait">
                <img data-bind="attr: { src: portraitURL }">
            </div>
            <div class="portrait-controls">
                <button data-bind="click: choosePreviousPortrait">&laquo;</button>
                <button data-bind="click: chooseNextPortrait">&raquo;</button>
            </div>
            <div class="details">
                <input data-bind="value: avatarName" class="h2">
                <div class="level">Level <span data-bind="  text: level" class="value"></span> Web 程序员</div>
                <div data-bind="text: talentSummary" class="talent-summary"></div>
                <ul class="stats">
                    
                    <li><span data-bind="text: title" class="title"></span>: <span data-bind="  text: value" class="value"></span>
                    </li>
                    
                </ul>
            </div>
        </div>
        <div class="sign-off">
            <h2>常用网站链接：</h2>
            <ul>
                <li><a href="https://alistapart.com/" target="_blank">A List Apart</a>
                </li>
                <li><a href="https://www.smashingmagazine.com/" target="_blank">Smashing Magazine</a>
                </li>
                <li><a href="https://www.codecademy.com/" target="_blank">Code Academy</a>
                </li>
                <li><a href="https://www.stackoverflow.com/" target="_blank">Stack Overflow</a>
                </li>
                <li><a href="https://www.reddit.com/r/web_design/" target="_blank">reddit webdesign</a>
                </li>
            </ul>
            <h3>享受学习</h3>
            <a href="https://www.352inc.com/" target="_blank" class="logo-352">
                <img src="https://wow.techbrood.com/uploads/150601/webmaster/img/logo352.png" alt="352">
            </a>
        </div>
    </div>
</div>
<div class="ltIE9-show ltIE9-warning">
    <img src="https://wow.techbrood.com/uploads/150601/webmaster/img/logo.png" class="logo">
    <h2>Please upgrade your browser!</h2>
    <p>Try one of these free options:</p>
    <ul>
        <li><a href="https://google.com/chrome" target="_blank">Google Chrome</a>
        </li>
        <li><a href="https://windows.microsoft.com/en-US/internet-explorer/download-ie" target="_blank">Microsoft Internet Explorer 10</a>
        </li>
        <li><a href="www.mozilla.org/en-US/firefox" target="_blank">Mozilla Firefox</a>
        </li>
    </ul>
</div>

什么叫精通网页开发，如何成为全栈工程师，且看此图。本图克隆自@352工作室，部分内容结合实际情况做了修改： http://wow.techbrood.com/fiddle/8623

h5, 路线图，学习树，职业路径规划

编辑器支持Emmet

快捷键

什么叫精通网页开发，如何成为全栈工程师，且看此图。 本图克隆自@352工作室，部分内容结合实际情况做了修改： http://wow.techbrood.com/fiddle/8623

h5, 路线图，学习树，职业路径规划

HTML5 Canvas海岛冒险RPG小游戏

HTML5 很棒的牵线木偶 | 皮影戏动画 | 空中杂技阴阳人表演

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

什么叫精通网页开发，如何成为全栈工程师，且看此图。本图克隆自@352工作室，部分内容结合实际情况做了修改： http://wow.techbrood.com/fiddle/8623