2016年04月_vvhh22

转载 SASS界面编译工具——Koala的使用

《SASS界面编译工具——Codekit的使用》一文中图解了"CodeKit"图形工具编译SASS项目。由于CodeKit是一款付费工具，而且只能在Mac中使用，因此国内众多SASS爱好者，或者初学者也就无法体验CodeKit工具编译SASS项目。幸运的是，有一款国产图形工具Koala和CodeKit功能极其类似，支持多个平台，而且是开源的。KoalaKoala官网下载Ko

2016-04-28 15:20:49 2949

转载 LESS CSS 框架简介

简介CSS（层叠样式表）是一门历史悠久的标记性语言，同 HTML 一道，被广泛应用于万维网（World Wide Web）中。HTML 主要负责文档结构的定义，CSS 负责文档表现形式或样式的定义。作为一门标记性语言，CSS 的语法相对简单，对使用者的要求较低，但同时也带来一些问题：CSS 需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，

2016-04-27 13:47:55 399

刚开始的时候，说实话，我很反感使用css预处理器这种新玩意的，因为其中涉及到了编程的东西，私以为很复杂，而且考虑到项目不是一天能够完成的，也很少是一个人完成的，对于这种团队的项目开发，前端实践用css预处理器来合作，是一种很痛苦，即使不痛苦那也是需要花费非常多的时间来协调合作上的。对于预处理器的态度，目前是本着学习新技术和推动css向前进的思想来学习新玩意。下面这篇文章来自w3cplus，这是一篇

2016-04-26 23:37:55 7052

转载 Ajax工作原理

在写这篇文章之前，曾经写过一篇关于AJAX技术的随笔，不过涉及到的方面很窄，对AJAX技术的背景、原理、优缺点等各个方面都很少涉及null。这次写这篇文章的背景是因为公司需要对内部程序员做一个培训。项目经理找到了我，并且征询我培训的主题，考虑到之前Javascript、CSS等WEB开发技术都已经讲解过了，所以决定针对AJAX这一块做一个比较系统的培训，所以这篇文章实际上是一个培训的材料。

2016-04-26 18:33:58 420

原创 js里面“===”与“==”的区别

首先，== equality 等同，=== identity 恒等。 ==，两边值类型不同的时候，要先进行类型转换，再比较。 ==，不做类型转换，类型不同的一定不等。下面分别说明：先说 ===，这个比较简单。下面的规则用来判断两个值是否===相等： 1、如果类型不同，就[不相等] 2、如果两个都是数值，并且是同一个值，那么[相等]；(！例外)的是，如果其中至少一个

2016-04-26 17:29:14 653

转载 JS中创建函数的三种方式及区别

1.函数声明?123functionsum1(n1,n2){ returnn1+n2; };2.函数表达式，又叫函数字面量?123varsum2=fun

2016-04-26 17:00:08 532

转载 JavaScript绑定事件的方法[3种]

要想让 JavaScript 对用户的操作作出响应，首先要对 DOM 元素绑定事件处理函数。所谓事件处理函数，就是处理用户操作的函数，不同的操作对应不同的名称。在JavaScript中，有三种常用的绑定事件的方法：在DOM元素中直接绑定；在JavaScript代码中绑定；绑定事件监听函数。一. 在DOM元素中直接绑定这里的DOM元素，可以理解为HTML标签。JavaSc

2016-04-26 16:49:32 545

原创 jquery $(document).ready() 与window.onload的区别

1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 $(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。 2.编写个数不同 window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个

2016-04-25 17:04:02 365

转载 iOS设备上高效演示APP原型的方法总结

相信许多产品和设计师童靴都可以用原型设计工具制作制作出逼真的产品交互原型，如果能方便、直接地在iPhone上演示这些APP原型，对于我们模拟用户真实体验，展示设计亮点都有很大帮助。壮壮结合自己这几天阅读资料和摸索实践，总结了一下个人认为最高效的方法，希望对在iPhone上演示APP交互原型有困扰的童靴们有所帮助。首先，简单介绍下我了解到的制作及演示APP原型的工具:

2016-04-14 12:04:07 789

原创 html5-svg标签使用基础三

html5-svg 标签滤镜（Path）它开始于位置 250 150，到达位置 150 350，然后从那里开始到 350 350，最后在 250 150 关闭路径。 M = movetoL = linetoH = horizont

2016-04-14 11:35:50 567

原创 html5-svg标签使用基础二

1.html5-svg 标签滤镜标签的 id 属性可为滤镜定义一个唯一的名称（同一滤镜可被文档中的多个元素使用）filter:url 属性用来把元素链接到滤镜。当链接滤镜 id 时，必须使用 # 字符滤镜效果是通过标签进行定义的。fe 后缀可用于所有的滤镜标签的 stdDeviation 属性可定义模糊的程度in="SourceGraphic" 这个

2016-04-14 11:34:47 1008

原创 html5-svg标签使用基础一

1.html5-svg 标签画圆（circle ）cx 和 cy 属性定义圆点的 x 和 y 坐标。如果省略 cx 和 cy，圆的中心会被设置为 (0, 0)r 属性定义圆的半径 stroke边框颜色。2.html5-svg 标签画椭圆（ellipse ）cx 属性定义圆点的 x 坐标、cy

2016-04-14 11:34:03 4452

转载请描述一下 cookies，sessionStorage 和 localStorage 的区别？

请描述一下 cookies，sessionStorage 和 localStorage 的区别？sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的，可以方便的在web请求之间保存数据。有了本地数据，就可以避免数据在浏览器和服务器间不必要地来回传递。sessionStorage、localSto

2016-04-04 00:07:34 585

原创浅谈移动端之touch事件--手指的上滑、下滑、左滑和右滑

原理：第一，当开始一个touchstart事件的时候，获取此刻手指的横坐标startX和纵坐标startY；第二，当触发touchmove事件时，在获取此时手指的横坐标moveEndX和纵坐标moveEndY;最后，通过这两次获取的坐标差值来判断手指在手机屏幕上的滑动方向。具体代码如下：总结：touchmove的最后坐标减去touchstart的起始坐标，X的结果如果正数，则说明手指是从左往右划动

2016-04-01 13:53:04 6617

转载移动端web app自适应布局探索与总结

1、困扰多时的问题在这之前做web app开发的的时候，在自适应方面一般都是宽度通过百分比，高度以iPhone6跟iPhone5之间的一个平衡值写死，我们的设计稿都是iPhone5的640 * 1136标准，所以高度一般取个大概值，各种图标的宽高也是取平衡值写死，然后部分样式通过媒体查询来设置，例如背景图的多倍图、基础字体大小、图标宽高。这样做的弊端很明显：1. 做出来

2016-04-01 10:45:52 966 1

转载 Flex 布局教程：语法篇

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

2016-04-01 10:32:45 657

转载 web前端 —— 移动端知识的一些总结

个人在移动端的一些总结归纳，有新的知识点会一直更新一.css部分1.meta标签移动端加上这个标签才是真正的自适应，不加的话，假如你把一个980px宽度(手机端常规是980)的PC网页放在手机上显示，倒也能正常显示不出现滚动条，不过是移动设备对页面做了缩小优化，所以字体等都相应缩小了（980px是相对于手机像素的，我的是超过1000px多一些就出现滚动条了，这个没

2016-04-01 10:23:40 1109

原创移动端meta定义 & 触屏事件

移动端meta标签属性说明：width – // viewport 的宽度（范围从 200 到 10,000，默认为 980 像素）height – // viewport 的高度（范围从 223 到 10,000 ）initial-scale – // 初始的缩放比例（范围从 > 0 到 10）minimum-scale – // 允许用户缩放到

2016-04-01 10:01:45 719

vvhh22的博客