无双

博学善思,自强不息

导航

统计

2015年2月5日 #

前端构建工具gulpjs的使用介绍及技巧

摘要:[gulpjs](http://gulpjs.com/)是一个前端构建工具,与[gruntjs](http://gruntjs.com/)相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中[stream](http://nodejs... 阅读全文

posted @ 2015-02-05 00:28 无双 阅读 (196048) 评论 (57) 编辑

2014年10月16日 #

用js动态生成css代码

摘要:有时候我们需要利用js来动态生成页面上style标签中的css代码,方法很直接,就是直接创建一个style元素,然后设置style元素里面的css代码,最后把它插入到head元素中。但有些兼容性问题我们需要解决。首先在符合w3c标准的浏览器中我们只需要把要插入的css代码作为一个文本节点插入到style元素中即可,而在IE中则需要利用style元素的styleSheet.cssText来解... 阅读全文

posted @ 2014-10-16 20:47 无双 阅读 (13766) 评论 (1) 编辑

2014年8月14日 #

前端上传组件Plupload使用指南

摘要:我之前写过一篇文章《文件上传利器SWFUpload使用指南》,里面介绍了上传组件SWFUpload的使用方法,但现在随着html5技术的逐渐推广和普及,再去使用以flash为上传手段的SWFUpload显然就有点过时了,毕竟html5原生的就给我们提供了文件上传的API。Plupload是一款由著名... 阅读全文

posted @ 2014-08-14 18:14 无双 阅读 (243403) 评论 (192) 编辑

2014年7月30日 #

移动前端开发之viewport的深入理解

摘要:在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。 一、viewport的概念 通俗的讲,移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,在具体一点,就是浏览器上(也可能是一个app中的we... 阅读全文

posted @ 2014-07-30 09:59 无双 阅读 (353445) 评论 (67) 编辑

2014年7月27日 #

性能更好的js动画实现方式——requestAnimationFrame

摘要:用js来实现动画,我们一般是借助setTimeout或setInterval这两个函数,css3动画出来后,我们又可以使用css3来实现动画了,而且性能和流畅度也得到了很大的提升。但是css3动画还是有不少局限性,比如不是所有属性都能参与动画、动画缓动效果太少、无法完全控制动画过程等等。所以有的时候我们还是不得不使用setTimeout或setInterval的方式来实现动画,可是setTimeo... 阅读全文

posted @ 2014-07-27 16:16 无双 阅读 (43820) 评论 (2) 编辑

如何判断一个js对象是否一个DOM对象

摘要:我们在写js代码时有时需要判断某个对象是不是DOM对象,然后再进行后续的操作,这里我给出一种兼容各大浏览器,同时又算是比较稳妥的一种方法。 要判断一个对象是否DOM对象,首先想到的无非就是它是否具有DOM对象的各种属性或特征,比如是否有nodeType属性,有tagName属性,等等。判断的特征越多,也就越可靠,因为毕竟我们自定义的js对象也可以有那些属性。还有其他方法吗? 在DOM Level2... 阅读全文

posted @ 2014-07-27 00:21 无双 阅读 (12310) 评论 (1) 编辑

2014年6月16日 #

用Phaser来制作一个html5游戏——flappy bird (二)

摘要:在上一篇教程中我们完成了boot、preload、menu这三个state的制作,下面我们就要进入本游戏最核心的一个state的制作了。play这个state的代码比较多,我不会一一进行说明,只会把一些关键的东西挑出来说。我们点击游戏菜单中的开始按钮后,首先出现的是这个画面:在第一部分的教程中,我们... 阅读全文

posted @ 2014-06-16 07:46 无双 阅读 (12517) 评论 (1) 编辑

用Phaser来制作一个html5游戏——flappy bird (一)

摘要:Phaser是一个简单易用且功能强大的html5游戏框架,利用它可以很轻松的开发出一个html5游戏。在这篇文章中我就教大家如何用Phaser来制作一个前段时间很火爆的游戏:Flappy Bird,希望大家看后也能做出自己的html5游戏。大家可以先点击这里来试玩一下我已经做好的这个游戏,感受一下P... 阅读全文

posted @ 2014-06-16 07:41 无双 阅读 (28589) 评论 (21) 编辑

2014年2月26日 #

css选择器中:first-child与:first-of-type的区别

摘要::first-child选择器是css2中定义的选择器,从字面意思上来看也很好理解,就是第一个子元素。比如有段代码:p:first-child 匹配到的是p元素,因为p元素是div的第一个子元素;h1:first-child 匹配不到任何元素,因为在这里h1是div的第二个子元素,而不是第一个;sp... 阅读全文

posted @ 2014-02-26 16:09 无双 阅读 (31360) 评论 (11) 编辑

2014年2月10日 #

用node-webkit把web应用打包成桌面应用

摘要:node-webkit是一个Chromium和node.js上的结合体,通过它我们可以把建立在chrome浏览器和node.js上的web应用打包成桌面应用,而且还可以跨平台的哦。很显然比起传统的桌面应用,在某些特定领域用html5+css3+js开发的web应用更加简单和高效,而且还可以使用node.js的功能,所以node-webkit还是很有用处的。 下面我通过一个简单的demo来介绍怎么样... 阅读全文

posted @ 2014-02-10 15:41 无双 阅读 (82561) 评论 (16) 编辑

2013年12月21日 #

为Titanium创建自己的安卓推送模块

摘要:在手机应用中,推送是一个非常重要的功能。相对来说ios应用的推送功能很容易做,因为它统一都是用苹果的APNS服务实现的。但安卓这边就比较混乱了,虽然谷歌也推出了类似苹果的官方推送服务,但由于谷歌的服务器在国内经常被墙,所以用谷歌官方提供的推送服务在国内是不可行的,所以安卓的应用就只能自己实现推送服务了。但如果完全由自己实现推送功能,那成本是非常大的。所以一般我们会选择一些第三方推送服务,比如极光推送就是一个非常不错的选择。首先,下载极光推送的安卓sdk,解压,找到打开libs文件夹,里面有两个东西把armeabi这里文件夹复制到你的Titanium安卓模块项目根目录的libs文件夹里面,如果没 阅读全文

posted @ 2013-12-21 13:04 无双 阅读 (1974) 评论 (19) 编辑

2013年12月18日 #

Titanium中调用ios组件时语言不是本地化的解决方法

摘要:用Titanium开发的ios应用中,当调用系统组件时,尽管手机已经设置了系统语言为中文,但那些组件的界面却仍为英文。比如调用iphone中的相册组件,其界面为: 那么怎么让它跟系统语言保持一致呢? 在原生的ios开发中,只需要在info.plist中把 CFBundleAllowMixedLocalizations 设置为 true 就行了,代表Localized resources can ... 阅读全文

posted @ 2013-12-18 14:54 无双 阅读 (1643) 评论 (0) 编辑

2013年11月5日 #

css3动画简介以及动画库animate.css的使用

摘要:在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工。美你妹啊,请叫我前端工程师好不好。呃。。好吧,攻城尸。。。呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3的动画就绝对是值得你拥有了,虽说IE9以及更早版本的IE浏览器都不支持css3动画,但是IE6-8浏览器已是江河日下,使用谷歌浏览器、火狐浏览器、IE10+浏览器以及移动端浏览器等这些支持css3动画的浏览器的人数越来越多,所以如果很简单的就能让一部分人获得更好的用户体验,那何乐而不为呢。从广义上来讲,css3动画可以分为两种。过渡动画 第一种叫过渡(transition)动画,就是从初始状态过. 阅读全文

posted @ 2013-11-05 19:17 无双 阅读 (175469) 评论 (34) 编辑

2013年10月28日 #

CSS布局奇淫技巧之--各种居中

摘要:居中是我们使用css来布局时常遇到的情况。使用css来进行居中时,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍。 注:本文所讲方法除了特别说明外,都是兼容IE6+、谷歌、火狐等主流浏览器的。 先来说几种简单的、人畜无害的居中方法 1. 把margin设为auto 具体来说就是把要居中的元素的margin-left和margin-right都... 阅读全文

posted @ 2013-10-28 17:17 无双 阅读 (103153) 评论 (38) 编辑

2013年10月11日 #

安卓 9.png 图片的制作

摘要:安卓的九宫格png图片可以自定义拉伸的区域,所以可以很方便的适应不同宽度高度的设备。 9.png格式是很纯正的png格式,与普通的png不同的是9.png格式的图片最外围有一圈1像素的透明区域,或者说有一条1像素的透明边框,这个区域中只能存在纯黑色和纯透明两种颜色。 图:外围的那圈透明的1px的区域 我们可以在这个1像素宽的外围透明区域中填充纯正的黑色(#000000),来标注该9.png图... 阅读全文

posted @ 2013-10-11 17:54 无双 阅读 (6126) 评论 (0) 编辑