w3cTrain

Keep Moving

如果在看文章之前,你还没不知道 stick footer 是什么的话,可以先看看下面这张图。
stick footer

容器使用负的margin bottom

首先是个包裹除了footer之外其他元素的容器,然后容器内有个占位元素,以及使用负的margin bottom,他们的绝对值相等。

1
2
3
4
5
6
7
8
9
<body>
<div class="wrapper">

content

<div class="push"></div>
</div>
<footer class="footer"></footer>
</body>
Read More...

方法必须传参数

ES6 的形参只有在用到的时候才会计算值,所以可以像下面这样写:

1
2
3
4
5
6
7
8
9
10
/**
* Called if a parameter is missing and
* the default value is evaluated.
*/
function mandatory() {
throw new Error('Missing parameter');
}
function foo(mustBeProvided = mandatory()) {
return mustBeProvided;
}
Read More...

来自《深入浅出Node.js》

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
;(function (name, definition) {
// 检测上下文环境是否为AMD或CMD
var hasDefine = typeof define === 'function',
// 检查上下文环境是否为Node
hasExports = typeof module !== 'undefined' && module.exports;

if (hasDefine) {
// AMD环境或CMD环境
define(definition);
} else if (hasExports) {
// 定义为普通Node模块
module.exports = definition();
} else {
// 将模块的执行结果挂在window变量中,在浏览器中this指向window对象
this[name] = definition();
}
})('hello', function () {
var hello = function () {};
return hello;
});
Read More...

我们可能经常会用到拖拽功能,这里的拖拽只的不是HTML5新事件Drag and Drop,而是更直观的,点击拖动元素位置。

其实拖拽功能并没有想象中复杂,主要实现三个控制点,

  • mousedown 鼠标点击开始,记录起始位置以及开始拖拽标识。
  • mousemove 如果当前属于拖拽状态,计算&调整相应位置。
  • mouseup 取消拖拽标识

完了。就这样而已嘛~

以一个拖拽滑动页面举个栗子:

See the Pen Drag-the-page by Helkyle (@HelKyle) on CodePen.

Read More...

昨天闲得蛋疼(等处理完毕业相关事宜才开始上班),想着过两天就要拍毕业照了,总得邀请三两好友过来吃大餐(食堂)吧~ 直接发条图文朋友圈好像有点low。

既然是学前端的,那就搞个H5吧,于是就开始了捉急的切图,设计(瞎搞),然后开始敲代码。

Sketch

预览

二维码
独立设计实现,有点简陋。

用到的东西

上篇介绍了vue,以及在如何 Laravel 快速搭建vue环境。
这篇讲如何在 Laravel 中更深入使用Vue。

预处理

vue还支持使用预处理工具,比如jade, sass等等。
假设使用Stylus, Jade,那就npm install 一下呗

1
npm install stylus jade --save-dev
Read More...

假设你已经搭建好 Laravel 环境

Vue.js

2016年,前端框架层出不穷,做一个项目之前,我们的技术栈有了更多的选择。
Vue就是一个前端框架,类似Angular,React,Ember。

Vue.js 是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习,非常容易与其它库或已有项目整合。另一方面,在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用。

—- 官方描述

如果到现在为止,你都没接触过Vue的话,那么建议你花点时间入坑

Read More...

我们经常使用 setInterval,setTimeout来执行动画,但是这两伙其实存在性能问题,它们不管浏览器绘制的合适时间,只顾自己操作,往往会造成塞车,跳帧,用户直观感受就是‘我的电脑卡死了’,使用 requestAnimationFrame 会让你的页面性能更优。

有什么优点

  • 浏览器优化,使用 requestAnimationFrame,浏览器能够自主调节,使动画看上去更加流畅。
  • 动画只在可见状态下执行,当你切换不同tab时,不可见的页面动画将会停止运行。
  • 省电

如何使用

requestAnimationFrame 方法使用很简单,同setInterval, setTimeout一样传递一个回调函数,这个回调函数中执行的是你每一帧的动画。所以要完成一个完整的动画,你需要递归执行这个函数。像下面这样

Read More...

轮播插件是前端开发中必不可少的组件,很多页面都会用到它。常用的轮播插件有 swiperslickslidesjsBootstrap Carousel等等。

这些轮播插件通常都有一个设置是否可循环的属性 loop。

实现思路通常有两种。

思路一

第一种是只显示当前元素和下一元素,其他子元素都隐藏不见。
以Bootstrap Carousel为例,

Read More...

注: 本案例来自 CSS Screct

先看效果:
效果图

你可能需要掌握下列知识

  • CSS3 Animation
  • Pseudo Element
  • 使用 linear-gradient 制作不渐变
  • currentColor (非必须)
  • 使用 border-radius ‘除’语法(非必须)

以上非必须标记,意味着如果你不追求代码质量,或使用预处理工具的话不了解也能实现。

HTML

实现起来并不复杂,这里只使用单个元素 + pseudo-element 就够了。

Read More...