无双 - 博客园

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

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

posted @ 2015-02-05 00:28 无双阅读(225719) 评论(60) 推荐(101)

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

posted @ 2014-10-16 20:47 无双阅读(17515) 评论(1) 推荐(5)

前端上传组件Plupload使用指南

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

posted @ 2014-08-14 18:14 无双阅读(297589) 评论(196) 推荐(50)

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

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

posted @ 2014-07-30 09:59 无双阅读(407829) 评论(67) 推荐(164)

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

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

posted @ 2014-07-27 16:16 无双阅读(49127) 评论(2) 推荐(2)

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

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

posted @ 2014-07-27 00:21 无双阅读(18051) 评论(1) 推荐(1)

用Phaser来制作一个html5游戏——flappy bird （二）

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

posted @ 2014-06-16 07:46 无双阅读(14061) 评论(1) 推荐(7)

用Phaser来制作一个html5游戏——flappy bird （一）

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

posted @ 2014-06-16 07:41 无双阅读(31687) 评论(21) 推荐(9)

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 无双阅读(46735) 评论(15) 推荐(24)

用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 无双阅读(93540) 评论(16) 推荐(11)

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

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

posted @ 2013-12-21 13:04 无双阅读(2338) 评论(19) 推荐(2)

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

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

posted @ 2013-12-18 14:54 无双阅读(2200) 评论(0) 推荐(0)

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

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

posted @ 2013-11-05 19:17 无双阅读(188465) 评论(34) 推荐(48)

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

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

posted @ 2013-10-28 17:17 无双阅读(105918) 评论(38) 推荐(85)

安卓 9.png 图片的制作

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

posted @ 2013-10-11 17:54 无双阅读(7570) 评论(0) 推荐(0)

无双

导航

公告