做有态度的前端团队

网易FEG前端团队

分类 其他 下的文章

  • css3滤镜总结

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

    其他

  • 一个简单的卡片效果

    具体效果点这里:http://xyq.test.nie.163.com/test/pics/index.html 一个简单的卡片切换效果,主要有以下功能 有4个切换的方向 动态加载数据 CSS3控制动画效果 动画的考虑 一开始是打算通过js动态地计算每个卡片的切换坐标以及动画移动的距离,无奈其计算量的复杂和繁琐,最终放弃了这一方案。 细细观察,你会发现其实每个卡片的位移以及切换出去的效果是一样的,所以完全可以固定写好每个卡片的初始样式,然后再通过js去动态地改变样式名。 所以,很愉快地就这样开始了样式的编写。 //通用 .poker-item { ......

    其他

  • chrome工具优化的学习小结

    前言 这个月一直不知道写什么,说明没认真学习啊~但是之前花了不少时间去维护chrome检查工具,没点总结,总感觉很浪费那段时间。这里把过程中遇到的问题做个小结吧。 先交代下chrome检查工具的背景:是一个内部使用,用来检测页面信息的chrome插件工具,检测的功能包括:页面的基本信息(比如一些seo信息、meta标签、加载时间)、检测某些特殊代码进行分析,检测图片的大小、检测页面发起的某些请求进行分析等等。通过插件工具来达到快速检测页面的某些规范信息,方便前端、编辑和qa直观快速的校验页面的一些信息。工具截图如下: chrome插件相关 因为本人只是负责对已有的插件进行优化升级......

    其他

  • 重温css的选择器

    本文主要和大家重温一下css选择器中的一些常用符号的使用,例如“+、~、^、$、>、*”等的使用! css选择器之特殊符号 1、>(大于号) 大于号代表选择子元素,这个我们经常用,值得注意的是 div>span 和div span 的区别 这2个都是选择子元素,但是 div>span 只选择某个元素的子元素。例如如下: <div>This is <span class="aa">very</span > <span>very</span> important.</div&......

    其他

  • 深入了解DOM对象

    DOM是文档对象模型(Document Object Model)是基于浏览器编程的一套API接口,W3C出台的标准,每个浏览器都有一些细微的差别,其中以Mozilla的浏览器与标准最接近。 通过 DOM,您可访问 HTML 文档中的每个节点。 查找元素 1、直接查找 getElementById(id) //获取有指定惟一ID属性值文档中的元素 getElementsByTagName(name) //获取带有指定标签名的对象的集合 getElementsByClassName //获取所有指定类名的元素 getA......

    JavaScript,其他

  • HTML5的history API和浏览器历史记录管理

    之前的天下手游移动官网还有一个功能就是左右切换页面内容时 功能介绍 history的HTML5 API可以更改当前页面的url但是不刷新页面,同时将路径记录到历史页面中,可通过浏览器后退按钮来返回到上一状态。这样可以轻松帮我们实现在ajax动态局部刷新页面后,通过后退按钮来回来前一状态,而保证页面不跳转。 API 1、存储当前历史记录点 window.history.pushState(stateObj, title, url) 三个参数: stateObj——一个与指定网址相关的状态对象,popstate事件触发时,该对象会传入回调函数。如果不需要这个对象,此处可以填null......

    其他

  • 浅尝模拟下拉框select

    前言 本文主要模拟下拉框select控件 详情请戳参考页面:梦幻西游手游武神坛 模拟select主要实现目标 1.点击下拉框区域,下拉列表没显示则显示,有显示则收起来,下拉箭头样式有所改变; 2.鼠标hover下拉列表上面有对应的交互; 3.点击选择下拉列表的值,收起下拉列表,并且在下拉框区域显示选中的值; 4.有多个下拉框的时候,点击其它下拉框区域,其它兄弟下拉框没收起的先收起,同时展开当前下拉菜单; 5.点击窗口空白处,有下拉菜单没收起来的也收起来。 实现步骤 以下是实现的html代码 <div class="select-wrap j-select......

    其他

  • 模仿网易新闻首页的滑屏切换

    网易新闻移动版,试试左右滑动来切换新闻栏目,是不是如丝般顺滑? 天下手游首页,也是模仿这种效果来做的,是不是也还可以(捂脸) 我们需要绑定touchstart,touchmove,touchend三个事件。支持H5的浏览器(移动端当然是都可以的)都支持以下绑定事件的方式——用handleEvent方法去区分不同的事件。 注:我们是在touchend事件触发的时候才会有左右滑屏。 //滑屏切换内容页 $("#main_container")[0].addEventListener('touchstart', touchHandle, f......

    其他

  • 结合小组里_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......

    其他

  • Threejs学习笔记(一) 基础篇

    基本概念 此学习笔记主要记录使用threejs的制作http://sqace.163.com网站中用到的API和相关知识点。 一个完整的3D环境包含以下元素: 1.场景(Scene):是物体、光源等元素的容器, 2.相机(Camera):控制视角的位置、范围以及视觉焦点的位置,一个3D环境中只能存在一个相机 3.物体对象(Mesh):包括二维物体(点、线、面)、三维物体、粒子 4.光源(Light):包括全局光、平行光、点光源 5.渲染器(Renderer):指定渲染方式,如webGL\canvas2D\Css2D\Css3D等。 6.控制器(Control): 相机控件,可通过......

    其他

  • 使用jQuery快速解决IE9以下浏览器无法支持input的placeholder属性的问题

    placeholder是html5的新属性,可想而知,仅支持html5的浏览器才支持placeholder,目前最新的firefox、chrome、safari以及ie10都支持,ie6到ie9都不支持。然而PC端页面也常常需要用到这个属性,效果表现为当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点时,提示文字消失。 要如何解决ie9以下浏览器无法支持的问题呢,可参考天下手游官网: http://tx.163.com/index.html 大概的代码如下: <form method="post" cl......

    其他

  • 横屏页面注意事项

    最近做了一个全横屏的页面—— 劲舞团移动官网 分享一些要注意的地方。 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......

    其他

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

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

    其他

  • 自定义命令行工具基于Nodejs

    每个人都会做一些简单的小工具去方便自己平时的工作,比如批处理文件。写个有界面的工具吧,有点费劲和没必要;如果能在命令行里面敲几个简单命令就能完成,就方便很多了,而我们又是前端开发,基于nodejs,学习的门槛就更低了 一、前期准备 需要下载两个node的插件 liftoff (执行命令行插件) minimist (读取命令行参数插件) 二、文件夹结构 需要将文件内容保存在指定文件夹才有效:windows用户一般为在C:\Users\用户名\AppData\Roaming\npm npm |--hello.cwd //windows下的命令入口文件(自定......

    JavaScript,工具,其他