做有态度的前端团队

网易FEG前端团队

  • 负margin小结

    关于负margin 对负边距使用恰当的话,其实它是具有非常强大的属性的,以下是几条关于负margin需要注意的地方: 负边距是绝对标准的css,并不是一种hack的方法 当没有使用浮动时,负边距不会破坏页面的文档流 浮动会影响负边距的使用,因此使用负边距的时候要小心 使用负边距,做了几个小demo 1.两个设置了固定高宽的div,分别是A,B 2.A设置margin-left为负值,如图A元素向左移了10像素 3.A设置margin-top为负值,如图A元素向上移了10像素,其父元素也向上移了10px 4.A设置margin-bottom为负值时,A并不会像你想的那样往下......

    CSS其他

  • 总结数组排序和去重的几个方法

    本月工作之余琢磨了一下排序算法,没弄明白的暂时就不写了,写写可以理解的几种,最后也顺便总结下去重。不对的地方,多多指教哈~ 排序 1、数组的sort()方法 数组自带了一个sort()方法,用于对数组的元素进行排序。如果调用该方法时没有使用参数,默认将按照字符编码的顺序进行排序。比如: var arr1 = [1, 2, 4, 22, 12, 5]; var arr2 = ['A', 'a', 'J', 'j']; console.log(arr1.sort()) //[ 1, 12, 2, 22, 4, 5 ] console.log(arr2.sort()) //[ '......

    其他

  • CSS3的3D转换

    在做新版本的3d轮播插件的时候,使用到CSS3中的3D转换属性,对各种3D属性做了一些深入一点的了解。 transform-style 官方解释:transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。 我的理解是它是用在一个3D空间的父元素上,其所有子元素处于同一个3d空间坐标内,如果子元素之间有相互交错的层级关系时我都会给父元素加上这个属性,让它们处于同一坐标系中。(以下讨论均基于这个前提) 来一张空间坐标系示意图: 3D转换的层级关系 因为轮播中会有slide叠加的情况,正常情况是后面的层级低于前面的,在这个时候我们的z-index属性将会失去作用......

    CSS总结

  • slide轮播 v1.0

    重写slide插件,一个艰巨的任务,就这样在展开了。 目前只实现了简单的左右切换和渐隐渐现的切换效果,戳http://test.nie.163.com/test_html/test/test/slide/demo.html 而且功能还在测试中,后续会继续完善。 这里简单说一下前后循环的实现效果,就是当切换到最后一张时,如何继续自然地切换到第一张。 参考目前优秀的swiper插件,发现它实现得挺聪明的。它是在第一张和最后一张分别插入临近的tab页,然后再进行下一张切换的时候,快速切换到相邻的tab页,然后再完美实现过渡效果。 下面画个图展示一下具体步骤: 同理,上一个切换也是......

    其他

  • 关于position:sticky的使用

    前段时间做的一个项目中有要求导航随页面滚动然后固定在窗口的某个位置(下面简称粘性布局),所以本文主要介绍 position:sticky 实现的粘性布局;链接在此; 为了实现这种粘性布局我们一般都是通过js监听window的scroll事件,当需要固定的元素滚动到窗口顶部时,把元素的position属性设置为fixed,否则,取消fixed,简单的js代码如下: $(window).scroll(function () { var top = $(window).scrollTop(); if (top >= nav_top) { ......

    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......

    其他

  • 关于魅族机子自带浏览器下视频弹层无法关闭问题

    20170720更新 最近发现下文提到的解决方案有点问题估计是魅族系统有更新了。而且下文的demo地址已经无法访问。 新的解决方案如下(其实是按照下文的方案二来改的): 定位加transform来实现居中 .m-video-con{ position: absolute; top: 0; //这里是关键,设置50%时就关闭不了了 transform:translateY(100%); -webkit-transform:translateY(100%); } 新的测试地址:http://test.nie.163.com/lj/video.html 之前做移动端......

    CSS

  • input的placeholder字体大小无法修改?

    今天碰到一个令人头疼的问题,一个输入框的placeholder显示的字体大小无法修改,很是奇怪,折腾半个小时,get到了一项自己未发现的新技能,下面慢慢道来。 先上图: 如图,一个普通的input输入框,然后设置了placeholder属性,然后需求是想修改placeholder显示内容的字体大小。我们看到上面其实已经设置了16px,按常理,placeholder的内容字体大小是继承其input大小的,所以习惯性去修改那个16px,结果失败。前往测试地址》》 第一反应,就是当前的设置被覆盖了,所以无论如何修改也无效。因为是非自己页面,在线debug通过chrome的开发者工具找了......

    其他

  • 如何实现异步代码用同步方式写(Web端)?

    前端写JavaScript的时候,经常需要使用两个异步回调的方法:$.ajax和setTimeout,这两个都是需要异步方式执行回调($.ajax可以设置为同步,但会卡住浏览器,不推荐这么使用),当有好多个$.ajax的时候,就会出现好多个回调,写起来很麻烦,甚至会出现传说中的回调金字塔,就像叠罗汉那样,Javascript有办法像Java、C#后台语言那样用同步方式写代码么?很抱歉,原生是不支持的(ES6、7会支持Promise同步调用,但需要非常高级的浏览器才支持,即使Node也不完全支持) 一般怎么写? var start = new Date(); //......

    JavaScript

  • Bug汇总

    又有一段时间没整理了,在这汇总下最近遇到的bug和解决方法 1、去除inline-block元素间间距的两种方法 <div class="abc"> <a href="">a</a> <a href="">b</a> </div> /*方法一*/ .abc{ display: inline-table; //chrome word-spacing: -6px; } a{ word-spacing: 0; ......

    总结

  • ES6学习笔记——参数

    在 ES5 中,在函数中我们需要各种操作去处理 默认参数、不定参数 和 重命名参数 等需求,在 ES6 中我们可以使用更简洁的语法完成这些需求。 默认参数 function addTwoNumbers(x, y) { x = x || 0; y = y || 0; return x + y; } ES6 中,函数的参数可以支持设置默认值: function addTwoNumbers(x=0, y=0) { return x + y; } addTwoNumbers(2, 4); // 6 addTwoNumbers(2); // 2 addTwo......

    JavaScript

  • 初探sessionStorage的使用

    本文主要讲述使用sessionStorage缓存接口数据 实例请戳这 点我 关于sessionStorage sessionStorage是针对一个session进行数据存储。当用户关闭浏览器窗口后,数据会被删除,刷新页面数据也还是存在。使用sessionStorage可以避免频繁调取数据接口,把数据储存到客户端。 sessionStorage的常用方法 window.sessionStorage.name = 'zuiniu'; // 赋值 window.sessionStorage.setItem('name','zuiniu'); /......

    其他

  • 从建站到发布网站

    如何编辑网站我就不说了,大家都会的,我主要是讲下如何将网站发布到线上这一系列的步骤(PS:数据库什么的都不考虑,上传最简单的静态页面,其他的留给大家探索)。 第一步:申请空间 我为了给大家演示,我就找了一个免费的空间--主机屋(PS:申请怎样空间看个人需求,平常练练玩玩就申请一个免费的就好,免费的有一个不好的缺点,就是每个月要来网站申请延期,这个比较麻烦的。),其他的知道过程就能举一反三了,进入主机屋:http://www.zhujiwu.com/ 下拉就能看下图信息,按箭头指的方向点击,我就选择了第一个演示,如下图。 点击查看详情看到的页面,点击立即开通,如下图。 之后点击初......

    其他

  • 最快的Web开发IDE——HBuilder

    HBuilder是DCloud推出的一款支持HTML5的Web开发IDE。快,是HBuilder的最大优势,通过完整的语法提示和代码输入法、代码块等,大幅提升HTML、js、css的开发效率。同时,它还包括最全面的语法库和浏览器兼容性数据。 从Frontpage、Dreamweaver、UE,到Sublime Text和JetBrains的WebStorm,Web编程的IDE已经更换了几批。HBuilder是DCloud(数字天堂)推出一款支持HTML5的Web开发IDE。“快,是HBuilder的最大优势,通过完整的语法提示和代码输入法、代码块及很多配套,HBuilder能大幅提......

    工具

  • css3滤镜总结

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

    其他