runfastlynda

你好,我是 lynda 一个喜爱设计的前端工程师
这是我的 Twitter,欢迎订阅

简单实现回到顶部的效果

August 31, 2015

实现一个简单的回到顶部的效果实质是在一个图片(或文字)添加click事件, 点击图片回到页面的开始。如果它可以逐渐出现,逐渐消失,动态的显示就更好了,那么现在开始! HTML代码 有了上面的html后,当我们点击有箭头的这个图片时,就会自动跳转到页面的顶部。 CSS…

用CSS设计响应式导航菜单

August 28, 2015

我们这次的目标是做一个响应式导航菜单,不使用javascript,只使用CSS就可以做到。就像这样: 初试效果 pc 响应式效果 pc HTML代码 我们要利用label元素的”for”属性,对应一个checkbox的id 上面的代码表示:当我们点击 就等于input…

说说Collapsing Margins

August 26, 2015

经常遇到Collapsing Margins,也就是margin折叠的情况,可总是不知道哪里出现了问题。 那就让我们来探讨下这个 margin 折叠 到底是什么鬼?它们是如何影响页面上的元素的?我们该如何拿下它? margin折叠是什么? 在W3C规范是这样定义margin…

2048源代码解读(5)

August 26, 2015

2048源码解读系列最后一篇,我们来解读最重要的 GameManager 部分。 GameManager函数有如下结构: 函数输入了size, InputManager, Actuator, StorageManager这四个参数,这都是之前我们解读过的, 参数传入后,size…

2048源代码解读(4)

August 19, 2015

已经阅读完localstoragemanager.js和keyboardinputmanager.js,这次阅读 html_actuator.js。 HTMLActuator函数有如下结构: 在函数的最开始获取了tile-container,score-container…

2048源代码解读(3)

August 18, 2015

前面一篇已经介绍了inputmannager.js那一部分的代码,接着想了解游戏中的状态数据是怎么存储和调用的,所以来阅读localstorage_manager.js。 localstoragemanager.js包括两个部分:window.fakeStorage…

2048源代码解读(2)

August 14, 2015

上文介绍了2048源码的宏观情况,下面打算仔细的看看源代码,我自己很感兴趣于键盘控制这一部分,所以决定先阅读input_mannager.js这一部分。 仔细查看了input_mannager.js的源代码发现好多的prototype。那先来看看prototype…

2048源代码解读(1)

August 13, 2015

源于参加百度ife训练营,我需要设计一个2048的小游戏,就像这样的: 2048游戏截图 有趣的是2048的作者将源码开放,最终在github里得到了项目的源代码,此时萌发了阅读源码的想法,说做就做,下面就是我的笔记了! 分析204…

开发一个前端项目的正确预备式

July 14, 2015

开发一个前端项目,我们需要做些准备,为了快速开始,我们一般会选择一个html标准模板。 html5标准模板 上面提供的html5标准模板包含了3个内容:设置 doctype,设置页面编码,引入css包括具有初始化css…

如何用sketch制作一个水滴图标

July 10, 2015

如何用sketch制作一个水滴图标呢?效果图如下: 效果图 step1 添加Artboard 单击inset选项,选择Artboard 在iPad screens下选择landscape 效果图 step2 创建背景 点击键,拖动鼠标,创建一个长方形,命名为background…