做有态度的前端团队

网易FEG前端团队

2016年6月

  • 记my官网改版遇到的自己挖的坑

    一直循环听着周柏豪的走狗一边思考着,多年搬砖的自己码了那么多年的代码,还是会挖坑给自己跳,有些还是很低级的错误,于是,带着愤愤不平的情绪记录下以下的各种坑: 1.官方资讯的导航交互效果 这是一个会有展开效果的导航。嗯。看图。 然后鼠标移上去会有这么一个展开的动画效果。 刚开始接到这样的交互天真地以为很简单的,应该没什么问题的。万万没想到,稚嫩的我还是没有考虑到展开动画效果的时候会触发到鼠标的hover事件,然后再次展开下一个tab,一直就这样整个画面摇来摇去。嗯,要改。 第一反应就是加个标志给它,动画结束之前禁止掉一切的用户操作。呵呵,又有一个新的问题诞生,就是从第一个t......

    总结

  • JavaScript观察者模式的运用

    观察者模式,是设计模式中的一种,具体含义和说明,这里就不写了,可以执行百度,这里主要讲解如何使用?如何改善现有的代码逻辑?如何解耦?等问题 一、最简单的例子 $("#test").on("click",function(e){ alert("hi"); }); 这是jQuery中的监听元素的点击事件,然后做出响应;其实这就是观察者模式的运用;监听某个事件,让其它模块来响应你,可能光这么说,感受不出它的好处,看下面的实例。 二、常规的模块间调用 用一个比较直接的例子说明,每个游戏中,都有生命值这个概念,当生命......

    JavaScript

  • 横屏页面注意事项

    最近做了一个全横屏的页面—— 劲舞团移动官网 分享一些要注意的地方。 1、根节点字体 当前我们移动端的根节点的字体大小是312.5%, 即16px*3.125=50px,此时编写css时,1rem=50px,网页100%宽度为7.5rem(375px/50)。我们是以屏幕的宽度为基准来计算的,可以用媒体查询来控制不同屏幕尺寸下的根节点字体大小,但是横屏时在部分手机上,媒体查询的高度和宽度仍然是以长的一边为高短的一边为宽,所以媒体查询失效。我们需要用js去控制根节点字体大小; if(window.orientation==90||window.orientation==......

    其他

  • React组件间通信

    近期为了练习react,自己写了一个Demo,功能很简单,展示员工信息列表,支持按性别和姓名筛选。效果如下: 默认: 筛选: 删除: 引用的文件如下: <script src="js/react.js"></script> <script src="js/react-dom.js"></script> <script src="js/browser.min.js"></script> 核心代码: <body&g......

    其他

  • 逐帧还是视频,如何选择

    前言 最近在做一个游戏技能展示的效果,效果一般都有3s左右,鉴于效果复杂度只能通过逐帧或视频来实现展示。既然有两种实现方式,如何选择呢?先来简单分析下: 逐帧 所谓逐帧,就是把动画帧导出为图片,然后再用代码把没一帧的图片按照一定的频率进行切换,达到动画重组的播放效果。以3s的动画,每秒26帧的速度来计算,需要72张图片才能实现。同理如果帧数要求越高,需要的图片就越多。难度主要涉及到图片素材处理、图片资源加载、逐帧播放不掉帧等等 视频 视频这个没什么好说的,关键是看怎么播放。因为要达到的效果是看起来像一个页面动画而不是视频播放,所以要求是表面上看不出是视频播放即可。最大的难点也在于此......

    JavaScript

  • window.location.hash使用总结

    最近做项目经常与window.location.hash打交道,在这总结梳理下。 location.hash可以用来获取或设置页面的标签值,比如http://space.163.com/m/#about的location.hash="#about"。通过window.location.hash = hash 这个语句可以调整地址栏的地址,使得浏览器里边的“前进”、“后退”按钮能正常使用,然后根据hash值的不同来显示不同的模块。 var hash; hash = (!window.location.hash) ? "#about" : win......

    JavaScript

  • 移动端一段小动画竟影响了苹果机文字无法复制?

    昨天做了一项目,添加礼包,以及礼包弹窗,弹出序列号以供用户手动复制,而坑便在这深埋了,苹果机竟然无法复制,安卓机挺正常的。项目 git链接在此 ,效果如下图: 无奈,最后在组长与军爷合力排查完美解决了,再次献上我的膝盖(~ o ~) 解决过程:把样式全部去掉,发现页面是可以复制的,接着一步步添加样式,这个过程也挺心累的!最后定位在一段小动画上 一个下拉指示按钮的动画上 @-webkit-keyframes upDown2 { 0% { bottom: 0.4rem; } 100% { bottom: 0.6rem; ......

    其他

  • Weinre+Gulp+BrowserSync结合实现远程调试

    weinre,大家可能都听过,是一个远程调试工具。继上次学习了gulp,这次突发奇想把它们结合起来做一些事情。虽然在Chrome下可以模拟移动端,但毕竟会有偏差。这次我想达到的目的是,在PC端开发移动端项目,然后可以在移动设备上实时看到效果,这是一种很棒的体验。 1、安装和启动weinre 全局安装weinre npm install weinre -g 我的node版本是v0.12.6,一开始安装报了个错。原因是npm安装的时候无法匹配到weinre插件所对应安装的版本。安装的时候指定它的版本为 2.0.0-pre-I0Z7U9OV 就可以了。如 npm install ......

    工具