前言 前两天在 echarts 上寻找灵感的时候,看到了很多有关地图类似的例子,地图定位等等,但是好像就是没有地铁线路图,就自己花了一些时间捣鼓出来了这个交互式地铁线路图的 Demo,地铁线路上的点是在网上随便下载了一个,这篇文章记录自己的一些收获(毕竟我还是个菜鸟)以及代码的实现,希望能够帮到一些朋友.当然,如果有什么意见的可以直接跟我说,大家一起交流才会进步. 效果图 http://www.hightopo.com/demo/subway/index.html 地图稍微内容有点多,要全部展示…

前言 前两天在 echarts 上寻找灵感的时候,看到了很多有关地图类似的例子,地图定位等等,但是好像就是没有地铁线路图,就自己花了一些时间捣鼓出来了这个交互式地铁线路图的 Demo,地铁线路上的点是在网上随便下载了一个,这篇文章记录自己的一些收获(毕竟我还是个菜鸟)以及代码的实现,希望能够帮到一些朋友.当然,如果有什么意见的可以直接跟我说,大家一起交流才会进步. 效果图 http://www.hightopo.com/demo/subway/index.html 地图稍微内容有点多,要全部展示…

flash交互课件能生动表达教学内容,也深受广大教育工作者的喜爱,但是目前flash课件只能在pc电脑平台上进行展示,随着移动网络的发展,越来越多的课件产品需要移殖到各种移动平台(手机,pad,智能电视,教学白板,电视盒子等)上进行应用,这就导致了flash课件越来越被很多教育公司所抛弃,而html5跨平台教育课件的产生,解决了广大教育公司的青睐. html5课件,即跨平台教育课件,只要应用平台上能够运行浏览器,那么就可以运行这个课件,一套课件,在多个场景都可以应用,目前,html5交互课件/益…

前言 3D 场景中的面不只有水平面这一个,空间是由无数个面组成的,所以我们有可能会在任意一个面上放置物体,而空间中的面如何确定呢?我们知道,空间中的面可以由一个点和一条法线组成.这个 Demo 左侧为面板,从面板中拖动物体到右侧的 3D 场景中,当然,我鼠标拖动到的位置就是物体放置的点,但是这次我们的重点是如何在斜面上放置模型. 效果图 代码生成 创建场景 dm = new ht.DataModel();//数据模型(http://hightopo.com/guide/guide/core/da…

http://hiloteam.github.io/tutorial/flappybird.html#_9 Flappy Bird是一款前不久风靡世界的休闲小游戏.虽然它难度超高,但是游戏本身却非常简单.下面我们就使用Hilo来快速开发HTML5版的Flappy Bird. 源文件结构 大家可以先下载Flappy Bird的项目源文件作为参考,以下是整个项目的文件结构: flappybird/ ├── index.html //游戏主页面 ├── js/ │ ├── game.js //游戏主模…

前言 最近特别忙,承蒙大伙关照,3D机房的项目一个接着一个,领了一帮小弟,搞搞传帮带,乌飞兔走,转眼已经菊黄蟹肥……有个小弟很不错,勤奋好学,很快就把API都摸透了,自己折腾着做了个HTML5的魔都的地铁线路图,能拖能拽的,还和电子地图做了交互.哥决定把小弟的成果纳入“HTML5大数据可视化效果”系列,以示鼓励(P.S. 其实还挺有压力的,后浪推前浪,新人赶旧人.我们这些老鸟也得注意,免得让00后给抢了饭碗) 效果图对比 网上的地铁图还是很多的,小弟选了这张比较新的做参考.想当年哥来魔都打拼时,…

“我有一个好创意,就差一个CTO……” ,这是今年炒的比较火的一句话. “原生APP开发难度大,周期长,成本高,还没上线市场已经被占领了.这个有没有解决方案?” “APP版本迭代更新,都是企业的一道难关,没有一个一劳永逸的解决方式吗?” “一个Web开发者如何能快速适应移动互联网时代,用HTML5开发出一个APP呢?” “安卓.IOS双平台同时开发,程序员都累死在加班的路上了……” “难道就没有一个原生App快速开发平台?” 针对行业痛点,国内外涌现出众多APP开发工具,开发者只要有相关的HTM…

快速开发CSS的利器-LESS? 天下功夫,唯快不破!效率,在项目开发上,这是极其重要的.要做到快.精.准,在人任何时候都不是一件轻松容易的事.但是如果借助一些相应的工具,那就另当别论了!那么要想快速开发CSS,是否有相应的工具可使用呢?哈哈,回答是肯定啦!为了满足大家,今天我就来讲讲快速开发CSS的利器-LESS吧! LESS是什么? LESS到底何方神圣?又有何神通?竟然有达到快速开发CSS的神力.其实嘛,LESS就是包含一套自定义的语法及一个解析器,用户根据这些语法定义自己的样式规则,这些…

近期出现一款魔性的消除类HTML5游戏<神奇的六边形>,今天我们一起来看看如何通过开源免费的青瓷引擎(www.zuoyouxi.com)来实现这款游戏. (点击图片可进入游戏体验) 因内容太多,为方便大家阅读,所以分成四部分来讲解. 本文为第四部分,主要包括: 16.分数往上飘动画 17.形状飞入动画 18.其他动画表现添加 19.游戏结束界面 20. 添加LOGO 21. 渲染优化 若要一次性查看所有文档,也可点击这里. 十六. 分数往上飘的动画 在表现加分时,分数会有个缩放的效果,然后往上…

近期出现一款魔性的消除类HTML5游戏<神奇的六边形>,今天我们一起来看看如何通过开源免费的青瓷引擎(www.zuoyouxi.com)来实现这款游戏. (点击图片可进入游戏体验) 因内容太多,为方便大家阅读,所以分成四部分来讲解. 本文为第三部分,主要包括: 11.显示出3个形状 12.形状的拖放处理 13.形状放入棋盘的实现 14.界面管理 15.消除行 若要一次性查看所有文档,也可点击这里. 十一. 显示出3个形状 1. 在Scripts/ui创建文件:Pool.js,绘制3个形状. v…