做有态度的前端团队

网易FEG前端团队

2017年2月

  • Augmented Reality

    噔噔!一个类似阴阳师现世抽卡的小demo,由于getUserMedia的兼容性问题,目前只有安卓手机可以看到...(建议拿一些高端点的安卓机) 玩法:扫左图的二维码后,点击允许访问摄像头后,再扫右边的二维码(相当于阴阳师里的召唤阵) 或者你也可以拿另外一台手机扫下面的码来显示召唤阵 下面探索一下其实现的原理,其中主要的交互包括: 开启摄像头 > 扫码 > 显示模型 转换为相对应的技术,奏是... · getUserMedia,开启摄像头获取设备的媒体信息 · OpenCv,js-aruco, 图像处理,识别二维码 · 画出3d模型,threejs,three......

    JavaScript

  • createjs库easeljs模块,实现粒子浮动效果(有大小、旋转、透明度变化)

    最近有项目需要用到粒子浮动效果,套用组内已有的粒子浮动组件,效果明显达不到预期。so爬了下国外一页面,该页面的粒子浮动效果,使用了createjs库easeljs模块实现。以下(下文)整理了下来。 页面效果:http://f7.163.com/ (参考国外页面:http://asterisk-war.com/) html代码: <canvas id="hexaGround" height="907"></canvas> <script charset="utf-8" src="......

    总结

  • flexbox布局实践1

    1、子元素等分 这种布局常用于底部的导航或者tab等分 ul{ display:flex; } li{ flex:1; } 完整代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>test1</title> <style> ......

    CSS

  • 简单的canvas绘图demo

    最近在看canvas基础知识,刚学完绘制路径、矩形,设置线条、颜色、样式和阴影等,就想码下demo巩固下基础知识。于是网上搜了,找到了绘制XP壁纸的例子,里面用到了前面说到的各个知识点。好了,进入主题了。 html代码: <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">浏览器居然不支持Canvas?赶快换一个吧!!</canvas> js代码: window.onload = fu......

    JavaScript

  • 解决thinkjs开发jsonp接口返回Unicode时的问题

    前言 第一次使用thinkjs写后端,踩了不少坑,其中有一个坑想了很久,无奈网上关于thinkjs的教程还是偏少,问了不少人,耗时很久,所以在这里mark下。 问题 需求很简单,后端返回通过接口把数据返回给前端,因为考虑到跨域问题,接口选择采用jsonp形式。其实就是平台平时提供给我们的那些接口,想想自己也能写接口,还是很激动的!类似下面的接口: 然后前端通过ajax请求接口,搞定!thingjs的controller本身就提供各种数据格式返回的封装。 比如,你要返回json格式,直接在controller里使用 async byrefererAction(self){ ......

    其他

  • 写了一个Chrome扩展,方便查看NBA赛况

    前言 最近写了个Chrome扩展,在这里和大家分享一下。 我们小组日常工作用的检查工具就是一个Chrome扩展程序,可以看看这篇文章,里面有一些介绍:chrome工具优化的学习小结...当然我写的这个比较简单,没那么多复杂的功能。这个其实和我们平常写web页面差不多,所以我们前端可以写,于是我也来试试这个东西~ 先来看看效果图: 默认展示当天的赛况 还有相邻两天的赛况 目录结构 ├── css │ ├── index.css │ ├── boostrap.min.css ├── img │ ├── icon-128.png │ ├── icon-48.png ......

    工具