CSS 水平垂直居中方法大全

前言 居中一个极其常见的需要,你应该绝不会陌生,但下面将要说的方法可能会有你不知道的。 下面的方法统一的HTML代码如下: <div class="demo-wrap"> <div class="demo-center"></div> </div> position+auto .demo-wrap{ width: 300px; height: 300px; background: #eee; position: relative } .demo-center{ width: 200px; height: 2...

2016
10-31

JavaScript 常用的排序方法

前言 Javascript 中排序可以说是非常常见的,不管是在平时的开发还是面试中排序都或多或少出现过。虽然说不算多,但是必不可少是肯定的。那么下面我们就来看看Javascript 中的排序方法都有哪些,在这里就不全列出,只把非常常用的分享给大家,其它的其实我觉得你知道有这个方法,并且知道在什么情况下可以用或者在什么情况下不能用就可以了。 原生sort sort() 方法用于对数组的元素进行排序,在原数组...

2016
10-28

JavaScript 实现数组去重的方法

前言 JavaScript 实现数组去重,一个在面试时常常会碰到的问题。如果你还像我那么不关注,不了解,不研究,那么你下次面试注定会失败,因为我可能就是败给了“去重”。下面我就把去重的方法都整理出来,下面的这些方法都来源于网络,但为了让你看得更清楚明了,我对方法中的代码稍稍作了下修改,但整体的思路还是不变的。 首先我们假定要对如下数组进行去重 var array=['true',true,false,'1',1,'','sss',"...

2016
10-22

CSS:清除浮动的方法(技巧)有哪些?

前言 浮动相信在平时的项目开发当中你一定用了不少,也遇到了不少。也知道有可以清除浮动的最常用的方法。那么下面我就给大家分享下我所知道的可清除浮动的方法。 清除浮动方法 float 法 也就是给父元素一个浮动,以达到清除浮动的效果。 /* 样式 */ .wrap-clear{border:1px solid #ccc;float: left;} .left-column{float: left;border:1px solid teal;} <div class="wrap-clear"> <div...

2016
10-19

立即执行函数(function ( ){……})( )

前言 我不相信你没有看这像标题里的函数书写方法,如果你说没有,那只能说明你才刚刚进入了 JavaScrpt 世界,那这种写法是什么意思,又有什么好处呢?下面我们就一步一步走进立即执行函数世界。 传统与简式 下面我们先来看一个极简单的传统与简式的例子,简单得一看就懂。 传统 我们最常见的函数执行方式就是,先定义一个函数,然后再调用它,如: /*执行函数*/ demo(); /*定义函数*/ function ...

2016
10-17

connect-flash 用法详解

前言 说到 connect-flash ,估计也有很多朋友像我一样被它虐了好一阵子,很多朋友可能都会遇到过这个问题:Express4.x 中的 connect-flash 为什么不起作用?或者 connect-flash 怎么用?诸如此类的问题,在这里我就给大家戳破 connect-flash 的神秘面纱! 官方解释 The flash is a special area of the session used for storing messages. Messages are written to the flash and cleared after being d...

2016
10-05

自己开发的第一个 gulp 插件-文件筛选

前言 自动化工具 gulp 的出现给我们这些从事前端的开发人员提供了很多便利,这让我们的开发效率得到了很大的提高。首先npm 官网上的gulp插件就非常地多,常用的插件基本都可以找到(图片压缩,CSS压缩,js压缩,文件重命名……),如果对这些基本的插件还不了解的可以看看这篇文章《前端自动化工具gulp 初识》。但在实践的项目中,很多时候需要也不是那么简单或者说单纯的现有插件已经满足不了...

2016
09-30

两次电话面试,都败给了自己,一个字“服”

因为自己想找个跟自己职业规划有交集的平台,于是不经意间开始了面试之旅。下面是自己对两次电话(分别对应两家公司)面试分析总结,以便让自己查缺补漏。这里我所说的是专业技能方面的电话沟通。 拍摄于珠海唐家港湾大道2015/11/28 首先,对两次面试中自己出现的共同问题进行分析记录。 通过这两次面试后, 我发现自己在跟别人沟通的时候,语速会不自觉地变快,甚至快到连话都说不清。虽然第一次电话面...

2016
09-22

前端自动化工具 gulp 初识

前言 我们先来看看官方是怎么说的: 易于使用:通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理。 构建快速:利用 Node.js 流的威力,你可以快速构建项目并减少频繁的 IO 操作。 插件高质:Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。 易于学习:通过最少的 API,掌握 Gulp 毫不费力,构建工作尽在掌握:如同一系列流管道。 gulp安装 初始化项目,初始化的的作用就...

2016
09-20

纯 JavaScript 带小图导航的焦点图、图片切换效果

作为前端,我们以开发页面时,难免会用到一些切换效果,比如常用的焦点图(Banner),但在这里我要跟大家分享的是一个带小图导航的图片切换效果,一个不基于其它库(如:jQuery)的实现方法。我们还是先来看看这个效果的过截图吧,一个是垂直方向的,一个是水平方向的,我想就这两个基本的效果都可以解决你90%关于带小图导航的图片切换了问题了。 由于代码有点多,就不在这里贴出来了,你可以点击对应效果...

2016
08-29

常用的 JavaScript 函数封装

获取兄弟节点 所有兄弟节点(不含自己) // 获取所有兄弟节点(不包含自己) function yk_sibling( elem ) { var ar = []; var n = elem.parentNode.firstChild; for ( ; n; n = n.nextSibling ) { if ( n.nodeType === 1 && n !== elem) { ar.push( n ); } } return ar; } 所有节点(含自己) // 获取所有兄弟节点(包含自己) functio...

2016
08-11

纯 JavaScript 固定导航效果(fixed)

前言 现在不少网站页面本身内容都会比较多,从而导致页面过长,当用户浏览页面时,如果要用户反手动拉滚动条回到顶部找导航那多少会有点不方便,或者说这样用户体验不怎么好。其实他个问题有很多种解决方案,如:给页面添加一个返回顶部的按钮,这样用户就可以快速地返回到顶部。那很多时候我们就是导航固定在页面的顶部,毕竟这个对于提高用户体验还是有帮助的。下面我们就来看看如何通过纯 JavaScript ...

2016
08-04

纯 JavaScript 实现单条新闻滚动效果

前言 单条新闻滚动效果相信你已经见过不少了,这个效果在很多导航页面中或多或少都会出现。最近我们360导航中就看到了这个效果,可当我研究下这是怎么实现的时候,竟然有意外的收获,这个页面里用到的方法是我从来都没有想过的,不过我也不知道我的猜测对不对,光从页面中的 HTML 结构及运动效果我大概地想到了这是如何实现的,但到底不是不真的像我想的那样,那就不一定了。好了费话不多说,我们还是来...

2016
08-01

纯 JavaScript 实现 tab 切换效果

作为前端开发人员,一些效果你肯定会常常用到,在这里我给大家分享一个tab 切换效果,这个效果我已经封闭好了,如果你想用直接把源代码复制到你的项目中就可以了,下一步你只需要在需要用到这个效果的页面调用这个函数就可以了,不管页面中有多少个Tab 切换,你都可以轻而易举地完成。下面我就直接把源代码贴出来。 移动端 Tab 切换 JavaScript 代码 function tab(tabWrap,tabMenu,tabLink,tabContent,...

2016
07-30

纯 JavaScript 生成随机数方法

前言 用到随机数的地方还是挺多的,如有些网站为了吸引用户就会对网站文章的点赞数,评论数,阅读数等等作出一个可观的数字,让别人看起来觉得不点都不舒服,虽然把随机数用到这里有点不好,但这种现象确确实实存在于我们的生活中。随机数除了这个用途外,其实还有很多方面会用到它。下面我们变来了解下如何通过 JavaScript 生成一个随机数。 相关方法 在说随机数之前我们先来了解JavaScript 中的几个...

2016
07-27

meta viewport 你真的了解吗?

前言 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> 上面是一行我几乎每天都用到的代码,它给我们带来的好处是非常明显的,一眼就可以看到的,除了这一点,我对它就一无所知了,我天真地以为只要认识它能给我实现什么样的效果就足够了,可事实却告诉我:“你这小子也太天真了,你千万别被网上一大堆的搜索结果骗了,...

2016
07-09

设备像素,设备独立像素,CSS像素

前言 这两个属性说难不难,说容易又不易容。但如果你弄明白了这个,你就明白了一些东西,一些你常常用但却不知道为什么的代码。下面我们还是先从它们各自的定义开始说起,其实虽然标题里是三个名词,但我们接下来只聊两个就可以了,为什么?看完你就知道了。 基本定义 设备像素:设备像素又称物理像素(physical pixel),设备能控制显示的最小单位,我们可以把这些像素看作成显示器上一个个的点。 CSS...

2016
07-02

document.querySelector()

前言 在平时的前端开发中,我们经常需要写一些小效果,比如TAB切换、图片轮播等等,不管是写什么 JavaScript 效果,你肯定离不开获取元素作为对象,然后对这个对象进行一系列的操作。而获取元素时,我们可以使用jQuery 库,也可以使用 JavaScript 为我们提供的原生的并且比较常用的方法getelementbyid()、getelementbyTagName()、getElementsByClassName()。但是本文要跟大家分享是另一种方法也是 JavaSc...

2016
06-22

纯 JavaScript 实现页面返回顶部效果

前言 对于一个内容有点多的页面来说,当你滚动页面底部浏览了一通后,突然想回到页面顶部,而如果页面没有类似于返回顶部功能的按钮,那么你也只能乖乖地滚动鼠标滚轮或者拉动浏览器滚动条来实现回到页面,很多时候你会觉得这个很费劲,特别是在手机端,一个屏幕本来就小得可怜的手机,如果内容非常,那么手动滚动回到页面顶部就如同噩梦一般。所以下面就给大家分享一个纯 JavaScript 实现的页面返回顶部...

2016
06-21

AngularJS

简单介绍 HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop. 译:不可否认 HTML 是一个很棒的静态文档语言,但当我们用它来做 webAPP 应用时,它就...

2016
06-16

html5 page visibility api 用法

前言 如今浏览器的多tab 窗口设计已经很普遍,可以说绝大多数的浏览器都已经默认地使用这种方法来打开网页进而提高用户体验。但因此问题也随之而来-资源的浪费,性能的下降。 在我们平时浏览页面时候,都没不经意地打开很多页面。就拿我自己来说,很多时候可能会同时打开7-8面而,由于工作需要甚至同时打开十几二十个页面也是常有的事。即使页面的数量不能少,那么怎么才能让用户使用了浏览器默认的tab窗...

2016
06-15

JavaScript call() 方法 和 apply() 方法详解

前言 最近在研究canvas时无意中遇到了call方法,于是乎一场不可避免的为期两天的厮杀就这样开始了。call() 听起来简单,但要是让你在别人的项目中遇到了,我估计你还是不怎么明白,别人为什么这样写。就拿我自己来说,一开始在网上查了了,看到一个解释是说这个方法是用来改变this 的指向的。如果单单看到这个,我想我早就应该明白了,call() 方法说真的其实很简单,但要把它真真正正的搞明白了,还是需...

2016
06-14

CSS3 clip-path 用法详解

前言 css3 的出现无疑是我们这些作为前端人的福音。因为它的出现让我们的在前端的世界变得更炫,多美,更多姿!接下来要给大家介绍的这个属性clip-path 就是一个可以让我们的页面更多姿多彩的 css3 属性。 clip-path 作用 正如前言中所说到的,可以让我们的页面变得多姿多彩,何为多姿,何为多彩呢? 多姿:可以让一个元素显示出不同的形式(如:正方形,圆形,长方形,椭员形,多边形……)...

2016
06-09

CSS 中改变横纵方向 writing-mode 属性

前言 Writing-mode属性,我从事前端这么久也还没看到过,更不用说上过了,是近在网上看到一篇关于 writing-mode属性的介绍,觉得不错,所以在这里也给大家整理分享出来。 其实这个属性IE5.5 版本的浏览器就已经支持了,但这个属性还是没流行起来,或者是说极少看到它的身影,因为在很长的一段时间里 FireFox,Chrome 浏览器都不支持wirting-mode属性。但随着前端技术的发展,各大主流浏览器也慢慢地开始...

2016
06-07

Animate.css 使用教程(一个强大的 CSS3 动画库)

前言 animate.css 是一个有趣,酷炫的,跨浏览器的动画库,你可以将它用于你的项目中。不管是主页,滑动切换,又或者是其它方面,你都可以通过它来制作出惊人的效果。 基本用法 引入CSS文件 这个对你来说应该再容易不过了,我相信你可能也已经对引入外部的CSS样式文件的代码以及快捷键也都背得滚瓜烂熟了。 你只需要在HTML文件的head标签中引入CSS样式文件,如下: <head> <link rel="styl...

2016
06-03

原生js开发,轻量级的移动端图片懒加载(lazyloadImg)插件

前言 下面给大家分享一个很好用,很经量的图片懒加载插件,重点是它是原生的javascript 不依赖任何 javascript 库。所以对于移动端来说,这真是一个棒极了的图片懒加载插件。我们先来看看官方激动人心的介绍: LazyloadImg介绍 LazyloadImg 轻量级的移动端图片懒加载插件 原生js开发,不依赖任何框架或库 支持将各种宽高不一致的图片,自动剪切成默认图片的宽高。比如说你的默认图片是一张正方形的图片...

2016
06-01

CSScomb – Sublime text中一个超赞的CSS属性排序插件

前言 CSS样式的有序排列对于提高工作效率或多或少都会有就贡献,当你看到自己写的代码齐刷刷的有序排列,心情肯定也不会差,特别是对于从事前端开发的朋友来说。所以下面就给大家分享Sublime text中一个超赞的CSS属性排序插件 – CSScomb。通过这个工具可以让你重新排列CSS中所定义的属性,也可以按照你预定义的排序格式生成新的CSS。 基本介绍 CSScomb 插件的主要特征: 1.帮助排序CSS属性 2.自...

2015
12-06

CSS3 Flex 弹性布局用法详解

什么是Flex弹性布局 Flex是Flexible Box的简称,意为弹性布局,顾名思义,在网页布局时,他可以给我们提供更多的灵活性。 说明: 1.flex是display的一个属性值。与之相当应的还有一个是inline-flex。 2.设置了Flex布局后,子元素的float,clear,还有verticle-align属性都不起作用。 3.设置了display:flex属性的元素,称为Flex容器,他里面的所有子元素统称为容器成员,称为Flex项目。后面我们就使用Fle...

2015
11-26

移动web福音:HTML 5 应用程序缓存

前言 虽然现在有了4G网络,也快奔5G网络了,但是移动WEB在移动端表现还不是很出色,其中一个最关键的原因就是网速问题,移动端网速才是王道,如果你的移动应用打开得慢了,那么还有谁愿意花几十秒来等你这个网页下载完呢? 不过值得我们高兴的是HTML5给我们带来了一大惊喜:应用程序缓存。其实它的强大之处不是表现在功能上,而是用户体验上。他可以让你的移动WEB页面得到更快的响应以及更加快的展现在用...

2015
11-03

Ruby 环境 Sass 编译时出现 Invalid GBK character "\xE5"的解决办法

Ruby环境安装好,Sulime text 的Sass插件也安装完毕,并且也用来写代码有几天了,今天突然遇到了一个问题 Error: Invalid GBK character “\xE5” on line 2 of C:\Users\Administrator\Desktop\canvas\test.scss Use –trace for backtrace. [Finished in 0.6s]6. 原因是我们代码里出现中文了,只要我把中文去掉,点保存就没问题了。但用中文作为注释是必需的呀,所以百度了下,方法也找到...

2015
10-08