做有态度的前端团队

网易FEG前端团队

Eason 发布的文章

  • 安卓微信下video最顶层

    问题:页面video在安卓微信下最顶层 一般我们做页面视频时,都是点击视频按钮弹出一个遮罩层再播放视频。然而当页面本身有一个视频video时,再点击另外的按钮弹层的时候又是怎样的状况?原先页面如下图: 点击下面的 往期视频按钮 后是弹层播放视频,然而在安卓微信下的打开是这样的。 打开方式错了吧?跟想象不一样哦,页面上的视频在遮罩层上面。。。那么我们第一反应应该是页面上video层级太高了吧,但是发现遮罩层的层级z-index:9999;已经是最高了。what? 但在自带浏览器以及苹果机能够正常显示(页面video在遮罩层下面)。 页面体验链接: https://test.n......

    其他

  • uc浏览器某元素消失了

    先对比上面两张图,显而易见,第一张图 预约按钮上面的输入框不见了,但是在其他浏览器都正常显示。到底它在UC浏览器都经历了些什么,找来测试机子本地调试,但本地调试显示正常,这就尴尬了,给找出问题所在增加了阻碍。 嗯,那为什么我说在uc浏览器某元素消失了而不是说输入框消失了,可见uc玩消失的不是针对输入框,而是被某些属性或什么影响到了。 先看看在uc其他输入框能正常的页面,对比一下,少了value属性,type属性也不一样,那改成一样试试,结果不尽人意,接着就剩class类名不一样了,万万没想到真的是用名不慎。还是组长机智! 怎么回事呢?这里是一个输入电话号码的输入框,类名便简单为p......

    其他

  • 页面随鼠标位置而移动~

    一个简单的交互,页面区块随鼠标移动而移动。 页面效果(第二屏):http://test.nie.163.com/test_html/game.academy/open-day/201612/ 1.重温screenX、clientX、pageX 的区别 screenX:鼠标位置相对于用户屏幕水平偏移量,而screenY也就是垂直方向的,此时的参照点也就是原点是屏幕的左上角。 clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角,该参照点会随之滚动条的移动而移动。 pageX:参照点也是浏览器内容区域的左上角,但它不会随着滚动条而变动 2.pageX 小d......

    其他

  • 十月知识记录

    最近做镇魔曲手游项目,对做项目及注重交互又有了深一层的了解。这里学习并记录几个技能点,方便以后开发。 一、水波纹交互效果 鼠标交互效果:鼠标滑上去时出现水波纹由内往外扩张并逐渐消失。那这个效果是怎么实现的呢。 <div class="skill-slide"> <a href="javascript:;"></a> </div> .skill-slide a{ width:70px; height:70px; border-radius: 50%; ......

    CSS

  • safari几个小bug及番外

    1、input 输入框的内容在 Safari 浏览器下光标的显示问题 输入内容后,光标靠上,未居中。在其他浏览器正常。 一般样式是这样写的: width:434px; height:54px; line-height:54px; text-align: center; 解决方案 把高度居中用padding设置 width:434px; height:24px; line-height: 24px; padding:15px 0; text-align: center; 2、一个按钮(a标签)在 safari 浏览器下不显示为“小手” 页面git》》 <a class......

    其他

  • css3滤镜总结

    css3有一些滤镜挺有意思的,也很简单,遂学习一下,但一般会用得比较少,我们都直接切图了。 这些滤镜主要都是都图片效果的处理,样式属性值中一般使用一个数值或数值百分比作为参数。我们用两张照片做对比看滤镜的效果。 1、grayscale(灰度滤镜) 彩色图像转为灰度图像 <img src="1.jpg"> <img src="1.jpg" class="grayscale"> .grayscale{ filter:grayscale(100%); -webkit-filter......

    其他

  • 结合小组里_animation.less的几个Loading效果

    之前我们写一些css3动画,每个语句都要写5遍有木有,-webkit-,-moz-......虽然我们可以复制,但是代码量一下子蹭蹭蹭就上去了,看得头晕,不简洁。还好我们小组有一个已经封装好_animation.less。 以下是几个loading栗子。 效果预览戳我戳我 第一个效果 <div class="loader-inner ball-clip-rotate"> <div></div> </div> .ball-clip-rotate > div { background-col......

    其他

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

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

    其他

  • 移动端300ms点击延迟和点击穿透问题

    闲暇中get到一点小知识,整理一下与大伙分享。 一、移动端300ms点击延迟 一般情况下,如果没有经过特殊处理,移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟。也就是说,当我们点击页面的时候移动端浏览器并不是立即作出反应,而是会等上一小会儿才会出现点击的效果。 原因 早些时候为了应对小屏幕浏览桌面端站点的问题,于是有了双击缩放,也是上述300 毫秒延迟的主要原因。 双击缩放与300ms延迟的联系: 假定这么一个场景。用户在移动端浏览器点击了一个链接。由于用户可以进行双击缩放或者双击滚动的操作,当用户一次点击屏幕之后,浏览器并不能立刻判断用户是确实要打开这个链接,还......

    其他

  • 新手学习新闻发布系统步骤版

    刚进公司那会,第一个接触的技术便是新闻发布系统了,刚开始学还真觉得有些难,幸好有个温柔美丽的女神一直带着我,任劳任怨,无怨无悔的精神让我想娶了她,哈哈。女神带我做了两三个项目之后,慢慢理出了头绪,也明白了其中的逻辑。下面我便列出做新闻发布系统的步骤,以后刚进来的新手也可以来这里学习,也欢迎大神们来纠错补充。 一、认识模板 模板分为:索引模板、more模板、详情模板。 索引模板:简单的说,即进入详情页的入口(更多的解释我想到再作补充)。 more模板:即有分页的模块。(目前这个我还没做过,等做了再来写步骤)。 详情模板:可以理解为一篇详细的新闻介绍。 这里常见的是建立索引模板,对......

    总结

  • 图片懒加载

    Web 图片的懒加载就是通过读取img元素,然后获得img元素的data-src(也可以约定为其他属性名)属性的值,并赋予img的src,从而实现动态加载图片的机制。 这里需要注意的是: img在初始化的时候不要设置src属性,因为即使设置 src='' 浏览器也会尝试加载图片。 一个简单的图片懒加载共涉及两个方面: HTML 约定 给img元素添加class="m-lazyload",同时将img src赋值给data-src属性。 <img class="m-lazyload" data-src="imgUrl"......

    其他