2016年06月_Dragon_GL

原创 Css转Sass、Css转Less在线工具

1、Css在线转为Sass/Scss :站点：CSS 2 SASS/SCSS CONVERTER2、Css在线转为Less :站点-1： CSS 2 LESS下面随带推荐一个Less转css的在线工具，站点地址是： LESS 2 CSS 站点-2：FISHSTICSS站点-3：CSS2LESS.NET站点-3：CSS PREprocessorsCSS PREprocessors是一个相当不错的站点

2016-06-25 14:35:13 43220

原创遮罩层——通过阴影弱化背景的四种方案

方法一：代码-1：/* 用于遮挡背景 */.overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0, 0.8);}/* 需要吸引用户注意的元素 */.lightbox { position: absolute;

2016-06-24 21:32:37 7556

原创 JavaScript笔记整理——驯服线程和定时器

定时器提供了一种让一段代码在一定毫秒之后，再异步执行的能力。由于Js是单线程的（同一时间只能执行一处Js代码）。定时器提供了一种跳出这种限制的方法，以一种不太直观的方式来执行代码。需要注意的是，定时器并不是Js自身的一个功能。定时器作为对象和方法一部分才能够使用。这也就提醒我们，在非浏览器的环境中使用JS，很可能定时器就不存在了。1、创建和清除定时器JavaScript提供了两种方法创建和清除定时器

2016-06-24 16:23:52 1211

原创 JavaScript笔记整理——递归

递归本词条由“科普中国”百科科学词条编写与应用工作项目审核。程序调用自身的编程技巧称为递归（ recursion）。递归做为一种算法在程序设计语言中广泛应用。一个过程或函数在其定义或说明中有直接或间接调用自身的一种方法，它通常把一个大型复杂的问题层层转化为一个与原问题相似的规模较小的问题来求解，递归策略只需少量的程序就可描述出解题过程所需要的多次重复计算，大大地减少了程序的代码量。递归的能

2016-06-14 17:28:14 343

原创 html5中的Viewport标签 — 视区概念

viewport视区标签可以让移动应用或页面的大小适合各种手机、各类像素。开发”地图”时候，也需用到viewport视区。1、什么是Viewport视区？用html5开发移动应用时往往会遇到手机的分辨率或屏幕大小不同的问题，如何使我们开发出来的应用或页面大小能适合各种手机呢?html5中的viewport能帮我们做到。手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中，通常这个虚拟的“

2016-06-10 13:56:58 663

原创 JavaScript笔记整理——this 的工作原理

JavaScript 有一套完全不同于其它语言的对 this 的处理机制。在五种不同的情况下，this 指向的各不相同。1、五种情况1>、全局范围内this;当在全部范围内使用 this，它将会指向全局对象。浏览器中运行的 JavaScript 脚本，这个全局对象是 window。2>、函数调用foo();这里 this 也会指向全局对象。 ES5 注意: 在严格模式下（strict

2016-06-10 11:54:53 268

原创 JavaScript笔记整理 —— 函数声明与表达式

函数是JavaScript中的一等对象（一等公民），这意味着可以把函数像其它值一样传递。一个常见的用法是把匿名函数作为回调函数传递到异步函数中。函数声明function foo() { }上面的方法会在执行前被解析(hoisted)，因此它存在于当前上下文的任意一个地方，即使在函数定义体的上面被调用也是对的。foo(); // 正常运行，因为foo在代码运行前已经被创建function fo

2016-06-09 16:06:55 310

原创 JavaScript笔记整理——for in循环

和 in 操作符一样，for in 循环同样在查找对象属性时遍历原型链上的所有属性。// 修改 Object.prototypeObject.prototype.bar = 1;var foo = {moo: 2};for(var i in foo) { console.log(i); // 输出两个属性：bar 和 moo} 注意: for in 循环不会遍历那些 enumera

2016-06-09 15:02:38 256

原创 JavaScript笔记整理——原型和原型链

JavaScript 是唯一一个被广泛使用的基于原型继承的语言。js原型和js原型链总会给人产生一些困惑，特别是函数(function)的原型(prototype)属性(property)。事实上，原型是一种非常简单的概念。JavaScript 不包含传统的类继承模型，而是使用 prototypal 原型模型。虽然这经常被当作是 JavaScript 的缺点被提及，其实基于原型的继承模型比传统的类继

2016-06-09 14:57:50 328

原创 HTML5模拟齿轮动画

这是一个基于HTML5的齿轮动画特效，我们将齿轮转动的物理学原理，转换为HTML5代码，在网页上实现了模拟齿轮转动的动画效果。该齿轮动画的最大特点是它由好多个齿轮组成，这对齿轮传动的算法要求就大大提高了，而且我们并没有用JavaScript，而是纯CSS3实现的。HTML<html><head> <meta charset="gb2312"> <link href="css/zzsc.css

2016-06-09 14:40:47 2008

原创定制椭圆形状

1、自适应椭圆在创建圆形时，是通过border-radius这个属性给四个角指定一个合适的半径，当角半径大于一定值时就是圆了。 Tip : 但是，我们往往不希望设置固定的角半径，而是希望根据容器中的内容自动调整适应。那么，怎么制作出自适应椭圆的？border-radius特性这个属性可以单独制定水平和垂直半径：border-radius: 100px / 75px;使用像素的缺点是，不能自适应

2016-06-09 12:20:24 1086

原创 Javascript笔记整理 —— 提升

在JavaScript中提升包括函数提升和变量提升。函数提升：是指在代码编译时函数的声明会被提升到代码的顶部；变量提升：在js里，不仅函数可以提升，变量也会被提升，但函数的提升优先于变量的提升；1、是先有的鸡还是先有的蛋示例-1：a = 666;var a;console.log(a); // 666对，结果是“666”。可能有人会错以为是undefined, 因为var a;

2016-06-08 22:14:25 368

原创 JavaScript笔记整理 —— 作用域

1、什么是作用域？先想两个问题，变量存储在哪里？当程序需要的时候是如何找到它们的？这些问题说明需要一套设计良好的规则来存储变量，并且之后可以方便地找到这些变量。而这套设计良好的规则就是作用域。继续深入理解：这些作用域规则是在哪里？怎样设置的？请继续阅读2、编译原理尽管通常将js归类为“动态”或者“解释执行”语言，但事实上它是一门编译语言。但是与传统的而编译语言不同的是，它不是提前执行的，编译

2016-06-08 22:10:19 425

原创使用Brackets编写Sass代码

大家知道Brackets是一个可以实时浏览html页面修改效果的工具，对于前段开发人员应该不会陌生，有了它，布局页面再也不是什么困难了，目前为止已经更新到1.6了。下载最新版可以到官方网： http://brackets.iosass 大家应该也有所了解，它是一个预编译样式的脚本，可以通过sass编译器编译成相应的css代码。详细的关于sass语法请参考官方网： http://sass-lang

2016-06-08 22:05:17 2356

转载 Flex 布局教程：语法篇

网页布局（layout）是CSS的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。Flex布局将成为

2016-06-06 20:58:28 322

原创 3行Css实现div水平、垂直居中

HTML部分：<div class="container"> </div>Css部分：就像下面，只需要给.container三行css规则就可以使它在水平方向和垂直方向均处于居中。.container { display: flex; justify-content: center; al

2016-06-06 19:25:34 989 1

转载 BFC 神奇背后的原理

BFC 已经是一个耳听熟闻的词语了，网上有许多关于 BFC 的文章，介绍了如何触发 BFC 以及 BFC 的一些用处（如清浮动，防止 margin 重叠等）。虽然我知道如何利用 BFC 解决这些问题，但当别人问我 BFC 是什么，我还是不能很有底气地解释清楚。于是这两天仔细阅读了CSS2.1 spec 和许多文章来全面地理解BFC。一、BFC是什么？在解释 BFC 是什么之前，需要先介绍 Box、F

2016-06-05 20:33:32 377

Dragon.G