做有态度的前端团队

网易FEG前端团队

2016年4月

  • 关于图片垂直居中的几个方法

    偶尔会有这样的需求:在不知道图片宽和高情况下,需要让图片水平和垂直居中在某个容器下,而且,如果图片宽或者高超出容器,需要按照比例进行缩放,下面介绍几个常见的方式 Javascript篇 用JS的方式处理解决图片,思路就是预加载图片,然后取宽和高,计算位置,设置margin值,达到目的 //计算图片居中位置的信息 function getImgSize(img,maxWidth,maxHeight){ var ratio, picW = img.width, picH = img.......

    JavaScript,CSS

  • 浅谈跨域的几种方式

    跨域,在平常工作中经常遇到,也经常被一些人问到跨域的处理方式。虽然处理跨域的几种方式都有用过,但是每次提到跨域的时候经常晕乎一下先,所以在这里总结一下平时用过的几种跨域方式 1、通过jsonp跨域 在js中,我们直接用XMLHttpRequest请求不同域上的数据是不可以的,而在html中,能够实现跨域的就几种: link属性(css) href属性(a标签) src(img标签、script标签) 为了解决跨域的问题,结合script能够发起跨域请求的原理,产生了jsonp,即:动态的创建script标签,跨域的地址加上需要传送的数据和回调函数为script标签的src地......

    其他

  • 简单梳理下最近项目遇到的某些bug或者事件不支持情况,和解决方法。

    1、JQ监听输入框value值改变事件(propertychange),浏览器之间的差异。 a:js赋值给输入框时,google浏览器不触发propertychange,IE可以触发,所以这里处理下 解决:加下判断浏览器,js赋值不触发时,使用trigger("propertychange")触发 js代码: $('.dj input').bind('input propertychange', function() { if(val > 70){ alert("最大值是70,不能超过最大值"); ......

    JavaScript

  • 上传图片样式统一及注意事项小结

    本文主要介绍上传图片样式统一及注意事项 参考页面:梦幻西游手游广州见面会专题 前言: 首先我们了解一下各浏览器的浏览按钮的样式是不一样的,以下借用网上常用浏览器下上传文件样式的各种截图。 但是他们有以下几点共同特性: 1.都可以设置整体的宽度和高度,但在IE,火狐,opera中设置宽度是不影响浏览按钮的宽度。 2.谷歌中只要是input的区域都可以单击弹出窗口;IE中,单击浏览按钮可以弹出。 3、设置input字体大小,IE、火狐、Opera的浏览按钮都变大了(宽与高)(这点很重要)。 实现上传图片样式统一具体步骤: 效果预览图: 以下是实现的html代码: <a......

    其他

  • 分享几个在开发中遇到的一些小问题

    1、修改chrome记住密码后自动填充表单的黄色背景 主要通过input : -webkit-autofill来进行修改! input:-webkit-autofill { background-color: #FAFFBD; background-image: none; color: #000; } 2、修改输入框placeholder文字默认颜色-webkit-input-placeholder input标签的placeholder 属性我们都常用到,它用来显示提示信息。提示会在输入字段为空时显示,并会在字段获得焦点时消失。这很好用。但placeholder 属性对于的样......

    其他

  • index总结和移动兼容问题

    做项目经常要用到index,关于index的几种用法,常常感到困惑。总结了一下,在这里列出来分享下。 1、index索引问题 <div id="nav"> <a href="#">建站素材</a> <p>建站素材</p> <a href="#">jquery特效</a> <a href="#">懒人主机</a> <a href="#&qu......

    其他

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

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

    总结

  • 浅谈cookie、localStorage、sessionStorage的使用

    本文主要介绍cookie、localStorage、sessionStorage这三者的区别和基本的应用,不对的地方欢迎大家多多指教~ 一、cookie 1、cookie是什么 简单地说,cookie就是页面用于保存信息的,比如常见的保存用户登录的用户名和密码。 2、cookie的特性 大小有限,大概4K ; 数量有限,大概50条(因浏览器而异) 兼容性好 同域可共享一套cookie 有期限(会过期) 会伴随着http请求 ... 3、cookie的基本用法 调试cookie的时候直接点开本地的html文件是不行的(firefox可以),文件需要在服务器环境(或loca......

    其他

  • 元素在页面中的尺寸和定位

    在平时开发过程中经常会遇到要获取元素的各种尺寸或者定位,什么offset,scroll,client,什么x,y,很晕有木有,从来没分清楚过有木有,于是决定花点时间把它理一理,分享给大家。 1、原生JS获取元素尺寸的方法 1.1、偏移量(offset) 包括元素在屏幕上占用的所有可见的空间,包括内边距、滚动条、和边框(不包括外边距)有四个属性——offsetHeight、offsetWidth、offsetLeft、offsetTop:如下图示意 1.2、客户区大小(client) 指元素内容及其内边距所占据的空间大小(不包括滚动区域),有两个属性——clientHeight......

    CSS

  • weui+react实践

    继上个月使用weui以后,我把react和weui结合起来做了一个表单,对输入的内容进行检验,检验内容有姓名、学号、手机号。 引用的文件如下,均为weui或react的文件: <link rel="stylesheet" href="css/weui.css"/> <link rel="stylesheet" href="css/example.css"/> <script src="js/react.js"></sc......

    其他

  • 小白带你探索WebP(下集)

    上回说到如何判断浏览器是否支持webp。 可以通过加载一张比较小的webp格式的图来达到目的。 function check_webp_feature(callback) { var kTestImages = 'UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA=='; var img = new Image(); img.onload = function () { var result = (img.width > 0) && (img.h......

    其他

  • 解决fis3本地开发编译GBK页面的乱码问题

    前言 之前大神写过一篇 【FIS 本地预览使用 NodeJS 服务器乱码问题解决办法】,解决了fis2编译gbk项目乱码的问题。后来小组推广fis3,fis3的server和fis2不同了:feg server open 打开 FIS 服务器的本地目录里面没有 server.js 这个文件,所以又出现了fis3编译gbk项目乱码问题。。。 简单分析 关于乱码分析,之前大神也写过一篇很详细的文章:【关于编码的那些事儿】 这里简单说一下: 决定chrome浏览器(可能每个浏览器表现不一样)最终显示的页面是否乱码是有三个因素决定的: http 返回头 Content-Type fis ......

    工具