-
CSS3动画的一些小总结
总结的内容有的是一些平时自己遇到过的容易被忽略的，有的是个人觉得简单实用的，特此分享！ 1、过渡 简单的状态变化只用transition就可以方便地实现： transition-property： 规定应用过渡的 CSS 属性的名称； transition-duration：定义过渡效果花费的时间，默认是 0； transition-timing-function ： 规定过渡效果的时间曲线。 transition-delay： 规定过渡效果何时开始，默认是 0 在用的时候遇到一个问题，就是transition在动画退场时会有退场动画，相当于......
-
关于嵌套新闻发布系统的一些事
本文主要总结嵌套新闻发布系统遇到的一些问题及解决方法！ 一、移动端-新闻内页中嵌套新闻列表页 如下图，在该新闻内页里面还需要嵌套新闻列表页，并且两者都需要加载更多翻页功能 所以，在这种情况下，内嵌的列表页需要用ajax获取并且实现翻页加载更多功能，链接在此； var _nextHostList="http://stzb.test.nie.163.com/m/qyz/news_list", _nextHost="", _totalPagesList=1, _totalPages=1......
-
记天下手游移动官网踩的坑
周末两天加班制作天下手游移动官网。如下图 git地址为：http://git-wz.gz.netease.com/tx/tx-gw-m-16v1 地址：http://tx.163.com/index.html（在你看到的时候有可能会新版替换） 在制作过程一直到上线在ios下的动画表现都很顺畅。然而上线后第二天，就有编辑来说部分安卓机卡爆了。尝试去掉视差组件parallax.js，小米4卡的程度减轻，但是还是看不了首屏七字动画，而且小米note,红米依然卡。卡到每一次界面有动画就是直接以方格形式从下往上从左往右渲染出动画的最终画面，而看不到动画的过程。 没得说，开始找问题。......
-
聊聊PC端页面适配
PC端适配？什么鬼！！！做不了~ PC端适配？又不早说，都做完了，还适配毛线~ 页面有bug！！！！为什么我笔记本打开只看到一半~ ... 以前谈适配只会想到移动项目，而有时候转做pc端，有一个很爽的感觉就是什么的尺寸都可以写死，不需要担心设备尺寸不同的问题。但是现在越来越多的PC项目也有适配的需求：目前我们pc项目的设计稿尺寸是宽度1920，高度最小是1080。对于宽度，我们规范了主体内容在1200以内，高度只有个最小值规范。 为什么pc需要考虑适配 因为pc需要考虑最小设备主体是1366*768分辨率的14寸普通笔记本，768的高度减去浏览器工具栏和桌面任务栏，实际的可视高度只......
-
项目中使用fis常见问题汇总
小组引入fis工具已经很久了，但是随着fis的推广以及新人的加入，一些常见的关于fis问题，经常被重复问到，所以本文整理汇总了fis使用过程中常见的坑。 1、node版本的问题 node版本更新有两条主线，一条是大版本更新，比如v5.6.0，官网默认推荐下载的版本是这条；另一条是小版本更新，比如v0.12.1。各版本详细下载地址 而目前fis2和fis3都是基于node小版本那条线，所以一开始安装node的时候就要注意下。否则即使安装成功，后期用着会发现某些fis插件出错的问题。 2、fis2新版本无法自动编译刷新问题 虽然目前推荐用fis3，但是工作中可能还会遇到fis2的旧项目......
-
如何提高微信授权页面制作效率
前言 刚接触微信授权页面的时候，感觉很麻烦，之前苏苏也总结了一篇文档 【移动端网站微信授权的处理方法】，看完之后对整个授权过程有了大致的了解，但是总感觉还是很麻烦，比如： 页面需要放到game域名（game.163.com）下（因为只有game域名是已经配置好授权回调的），第一，测试环境（text.nie.163.com）下无法授权成功，请点击测试demo；第二，所有这种页面都放在，慢慢多了就不好找了。 每个项目都需要建立index.html和app.html页面，然后index.html只是完成授权的操作，然后每次都要修改里面的type值（是否需要获取用户的详细信息，因为如果......
-
解决ios下的微信/易信打开的页面背景音乐无法自动播放
20160314更新 后面的项目发现，还有两个坑，需要注意下： 本文的解决方案的核心是利用了 微信/易信 在ready的时候会有个 WeixinJSBridgeReady/YixinJSBridgeReady事件，通过监听这个事件来触发的。那有个坑就是 如果微信已经ready了，但还没执行到你监听这个ready事件的代码，那么你的监听是没用的，所以监听的js一定要放在head前面(放在css外链之前)，确保最先执行，切记！切记！。 另一个坑就是，本文的解决方案只适合一开始就播放的背景音乐。如果你是做那种微信场景（打开页面模拟收到很多条微信，每条微信都要播放那段音效），实际上本文的......
-
CSS动态滤镜 filter 在ie下遇到的bug
CSS动态滤镜 filter 在ie下遇到的bug 前言 最初接触滤镜，是为了某些属性去兼容低版本ie而使用的。比如： opacity透明属性，我们会加入filter:alpha(opacity=50);这样的兼容代码 background-rgba半透明属性，我们会加入filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr='#4d000000',endcolorstr='#4d000000'); 另外还有颜色渐变、透明度渐变等等 看起来还是为我们解决不少问题的。 写这篇文章时特意再去查了一下，发现滤镜......
-
关于复制组件的那点事
1. 故事背景 自从Chrome 46屏蔽了Flash自动播放之后，很多小尺寸的Flash在Chrome 46以上都不会自动播放，替代的是一个播放按钮。而我们的复制组件就是基于Flash实现的，因此在Chrome 46以上的浏览器中，初始化后的复制按钮会呈现一个播放按钮，点击后Flash才会运行，之后再点击一下才能够实现复制，交互成本多了一个环节，用户体验就差了，遂需要对组件进行优化，实现Flash和浏览器接口的自主选择，在能使用浏览器接口的浏览器则默认使用浏览器接口，不支持的则使用Flash。 2. 发生了什么事情？ 既然是要用浏览器接口实现，那第一件事就是需要知道各浏览器都为复......
-
关于编码的那些事儿
最近，新的新闻系统启用了，大家遇到了不少页面乱码的问题。这篇博客会给大家讲解网页编码的详细原理，帮助大家理清思路，从而能有效地解决工作中遇到的乱码问题。 编码的故事 先来个生动的例子讲解一下网页的编码究竟是什么东东，以及编码在哪些环节会产生影响。我们平常会接触到的网页编码有两种，GBK（注：GBK 其实是 GB2312 的一个超集，下面都先以 GBK 来代表它们） 和 UTF-8。这里，可以把我们的网页想象成碟片，GBK 是音乐 CD，而 UTF-8 是影片 DVD。碟片就是我们写的网页，它有自己的编码格式，有 CD（GBK） 和 DVD（UTF-8） 两种。然后，存放网页的服务器......
-
网易PC内页移动端匹配插件使用方法
引用js地址：http://res.nie.netease.com/comm/js/nie/art/js/nie.setArt.js 这个小玩意用起来很简单，就是在html文档中嵌入这个js（为什么头部？在html文档未加载是时执行客户端判断，防止出现闪屏现象），然后就完了。 如果你要加入自己的移动端样式，也不难，调用本插件的方法，setPc.addCss();具体如下： setPc.addCss('css文件名');
-
GitLab 安装配置心得记录
GitLab 基础知识 GitLab 是一个开源的 Git 项目库管理程序，提供方便易用的 Web 界面，和友好的 API。 GitLab 是使用 Ruby on Rails 开发的。 GitLab 架构 Web 访问路线：用户 -> Nginx -> Unicorn -> GitLab-Rails Git over http 访问路线：用户 -> Nginx -> GitLab-Rails Git over SSH 访问路线：用户 -> GitLab-shell 名词解释 Nginx：http 反向代理，接受用户的 http 请求，再转发到后端......
-
FIS 本地预览使用 NodeJS 服务器乱码问题解决办法
乱码起因 因为我们网站组的页面绝大部分都是使用 GB2312 编码，然后 FIS 的 NodeJS 服务器默认返回的 HTTP 消息头里的 Content-Type 是 UTF-8，于是我们用浏览器去访问本地预览页面时，就会出现乱码的情况。浏览器首先是根据 HTTP 返回消息头里的 Content-Type 来决定使用哪一种编码读取页面，我们可以使用 Chrome 浏览器的开发工具来查看。 从图中可以看到，返回头的 Content-Type 是 text/html; charset=UTF-8，于是我们的浏览器也就使用了 UTF-8 来读取页面了，即使我们页面的实际编码是 GB2......
-
移动端Bug汇总
前言 进来小组，可以说了做不少移动端页面，各种千奇百怪的bug可以说见过不少。但是直到最近的项目，每每到了测试阶段我就很头疼，为什么我做出来的的页面bug数量总是没有明显递减，而且几乎每次都会发现一些新的bug。bug的数量没有明显递减，从侧面可以反应，经验的积累和实际项目的结合还是不够，最起码不应该出现以前出过的错误。同一个问题，不应该每次都花同样的时间去解决，第一次的经验应该给第二次带来效率。所以，在这里总结一下移动端值得记录的bug，包括一些解决和未解决的问题。会不断的更新汇总... ##已解决 1、输入框聚焦时无法弹起，被拉起的键盘挡住了 截图 原因分析 正常情况下，输......
-
css3星球椭圆运动
上一个项目里碰到了要写一个星球运动的动画，其中主要的点就是用css3如何实现椭圆运动。上网找了很久，看到一个“css3太阳系”的文章介绍，但可惜是正圆的，给人的感觉是平面，不适合。实在找不到，就自己想了些思路： 思路一：写个正圆的运动，然后用scale来变形。实践证明是不可行的，这样变形会导致里面的星球发生严重变形。 思路二：把星球同时做X轴和Y轴的位移运动。根据抛物线的原理，这个方案貌似可行。最后实践证明原理是这样，但有些地方需要留意下，否则会变成菱形运动了。 先看一下效果图吧： 失败实践： 先来看下椭圆的坐标示意图： 所以，一开始的想法就是，从原点o出发（分别给x、y轴......
做有态度的前端团队
网易FEG前端团队
© 2024 FEG-做最好的前端_网易游戏网站服务部前端团队_有态度的互联网前端团队. 由 NetEase 倾情推出.