pusongyang-CSDN博客

原创合并小图片利器TexturePacker GUI

合并小图片，可以很大的节省网络开销。尤其现在的网站很喜欢使用大量的小图标来做一些友好提示。当然使用图片文字也是一种选择。不过这里推荐的是TexturePacker GUI，这个确实是一款利器。合并小图片，刚刚开始的时候我们只能用PSD将各个图标合并到一张PSD上，然后切图。在CSS引用的时候在去计算background-position。后面开始用了web版本的图片合并工具，不

2015-07-01 09:33:26 1647

原创 TP:6DD02CBB

Hi Guys,I am a FE RD. Now I was develop an cocos2d game, and I was hoping to use the TexturePacker for cocos2d and web CSS sprite.much thanks!TP:6DD02CBB

2015-06-12 09:15:38 466

原创 javascript新特性let,function*,yield,promise

自从去了百度就好久没有更新博客了，看了以前写的东东，以前在小公司还是比较闲啊。讽刺的是这次又要换工作去小公司，才想起写篇博。。。去了百度后先学了python，然后前面的GG走了，我也不想用python了，就全力转用nodejs了。越来越喜欢上JS家族了，最近看了一下ECMA6的新特性，着实又增强了JS的生命力啊。看国外ASMJS大牛的视频说，JS的作者只用了10天就创造了这门语言。所以

2014-10-27 07:03:41 3620

原创现代浏览器下的动画实现

要在浏览器下实现动画，有几个JS的Lib不得不提：1） requestAnimationFrame，利用现代浏览器接口提供比setTimer和setInterval更高效的计时器（timer）。当然不兼容的浏览器，将还是使用setTimeout。2) Tween.js，类似AS中的Tween类，可以高效处理DOM元素渲染计算。适用于2D动画特效。3) three.js，提供给现代浏

2013-09-24 10:12:36 826

翻译理解node.js

>Posted on 29/4/10 by Felix Geisendörfer最近越来越多的听到大家讨论nodejs了，而且在招聘网站上也看到对node的要求，粗略看了一篇写的很好的文章。决定翻译一下：我介绍Node.js给人们时通常有两种反应：或者立即理解，或者十分困惑。你如果也是第二种，我尝试解释一下node：它是一个命令行工具。你下载了源代码，编译，

2013-04-20 00:13:18 1330

翻译 Javascript Closures与原理

介绍：一个闭包是一个表达式（通常是函数），能在这个表达式的封闭环境中自由使用绑定在这个环境中的变量。概括：原型链是用于对象的属性查找的，作用域链是用于函数体内标识符解析的。我们在定义函数时，其实是将该函数绑定到当前作用域的对象上，例如window对象。用"()"调用函数，实际上是对象方法的调用，所以这时被调用方法中的this关键字就是该对象。在使用new关键字创建用户自定义函数对象时，函数

2013-04-01 15:16:06 1242

翻译 CSS中的优先级(有些翻译为特殊性

CSS如果在网站中大量使用的话，常常就会纠结于这样的问题：当前的这个到底使用了哪些样式呢？为什么会这样展现？哦，我烦死了一堆的ID定义的CSS，还有在HTML中直接写style。理解CSS之前发的CSS技巧贴里面有CSS优先级的内容，不过描述过于简短了。想更好的使用CSS，或者成为高级的CSS研发人员，必须了解掌握CSS的优先级和继承。Meyer的书中有大量的篇幅来介绍这点，我这里mark

2012-09-12 21:36:08 579

原创 CSS格式化，Meyer和YUI

一直想写写CSS格式化的文章，最近毕业论文刚好要开题，就顺便mark一下。CSS格式化主要是通过对CSS的格式化来降低在不同浏览器中默认样式展现时的差别。这对于做跨浏览器网页的设计或研发人员都提供了良好的支持。目前流行的CSS的格式化主要有：Eric Meyer和YUI提供的。Meyer的CSS格式化，很早前就提出了，在她的经典CSS书中《CSS权威指南》。YUI的CSS格式化，也提供

2012-09-12 11:30:47 431

转载有用的CSS技巧

今天看到设计达人的CSS实用技巧文章，受益很多，感觉mark。原址：CSS使用技巧收集，包含CSS2/CSS3>>目前来说大部分网站都已经采用CSS来架构网页了，所以很多人都在学习CSS，以下是一些CSS比较常用的技巧，CSS2/CSS3的都有，可能有些你已经知道，但有些是新的，都值得一看，而且也很适合新手们去学习。01.DIV水平居中DIV 水平居中很简单，只需要设置DIV的宽带以及

2012-09-12 10:42:10 518

原创 HTML中定义的事件和JS中事件绑定的区别

JavaScript中的函数运行在词法作用域中，这也意味着函数在定义它们的作用域中运行，而不在调用它们的作用域中运行。下面的代码，在控制台中将打印出什么？a1a2a3function dosome(){ console.log(this);}document.getElementById("a2").addEventListener("click"

2012-08-26 15:47:37 2445

原创 CSS3 transition与animation

前一段时间项目上需要我在webkit核心的浏览器上，做一套比较炫的UI。开始准备采用canvas，不过发现canvas的执行效率不佳，虽然也做了刷新区域优化。为了凸显3D特效，又考虑是否需要采用WEBGL，不过，3D模型创建比较复杂项目进度也不允许。最后，采用了CSS3.CSS3优点是开发速度快，而且支持3D渲染加速。缺点是，目前支持不够规范，另外反锯齿比较差。今天先记录一下使用trans

2012-05-02 10:55:38 1735

原创也谈逃脱闭包escape closure(for循环中逃脱)

闭包是JS的一个重要特性，它能带给我们程序技巧方面很多的特色，但同时意外的闭包同时也会给我们产生困扰。这篇博文就是记录一下如何逃脱意外闭包。之前在《精通javascript》里面就看过一个逃脱闭包的例子。最近自己开发的过程也碰到了类似的问题。将问题抽象一下，首先页面上有3个div元素，要求每个div元素点击的时候弹出提示0，1，2.012理所当然的js写法：window.onl

2012-04-05 15:25:31 1123

原创 webkit CSS特效的小bug

Webkit的强大，就在于它能执行transform和transition。不过，因为CSS渲染比较新，而且很多人一直以来都坚持CSS不应该做动态的渲染。所以CSS的这些功能的支持，一直在进进退退。而HTML5中的Canvas大有可能替代CSS的这些特性。今天在使用中发现了一个比较棘手的问题：本来想做一个图片缩放后倒影的效果，结果怎么都出不来，CSS代码如下： position:ab

2012-03-01 11:28:40 674

原创 HTML5 canvas

最近要用做网页动画，纠结于使用canvas还是CSS3。。。反正先做笔记总没有错啦～ var cvs = document.getElementById("pageflip-canvas"); var ctx = cvs.getContext("2d");矩形 Rectangles方法：fillRect(x,y,width,height) : Draws a fille

2012-03-01 11:20:59 509

原创 CSS

最近在学习CSS，赶紧先记录一下。选择器selector，选中需要渲染的对象：元素选择器，选中HTML元素：h1 {color:gray;}选择器分组，使用逗号连接两个规则(使用同一个声明块)：h1,h2,p{color:gray;}通配选择器，匹配任何元素：*{color:red;}类选择器，选择含有class属性为classname的元素：*.classname{font-

2012-02-09 20:57:51 702 1

原创 HTML flow

上篇文章中提到HTML流，在这里稍微展开一下吧。HTML流，其实蛮有趣的，可以将一个浏览器窗口想象成左上角有吸引力，所有页面上的元素排版的时候，都会按HTML中从上倒下的出现顺序，向左上角靠拢。页面元素就像飘在水中树叶。这也就是为什么叫HTML flow。实际上浏览器正是这么实现的，它会根据每个HTML元素的宽高在窗口中从左上到右下流动排版。不过，我上面所说的原则是HTML元素使用

2011-12-22 10:36:10 1671

原创 Javascript原理

浏览器模块大致分为：文档分析模块，JS引擎模块，布局渲染模块。浏览器收到返回的HTML页面后，文档分析按照HTML文档的文档流顺序从上到下逐步解析页面结构和信息。HTML文档流是一个网页设计开发中很重要的概念，布局渲染也按照文档流展现和布局页面元素。当文档分析遇到其它标签时，会交给布局渲染模块，后台绘制（这时还没有展现）。遇到标签时，会交给JS引擎处理内容。也就是说Javascript的解析顺

2011-12-08 16:43:15 1454 1

原创 Javascript中object的this和that

因为Javascript中函数的上下文关键字this是如何调用函数决定的，所以函数的上下文this决不能包含为闭包的一部分。当需要在闭包内使用函数的上下文this的时候就需要转换成that。先来一个简单的例子，匹配所有元素(jquery)然后alert，"need_show"：...this.id='need_show';var that=this;$('*').each(fu

2011-12-07 15:06:20 3151 1

原创再谈Javascript中function fn(){}和var fn=function(){}

用Javascript 两大特点，也是JS引擎的实现必然导致的：1) 返回值。在JS引擎中，所有的语法，操作都有返回值，而且通常返回值是它本身或undefined。通常我们可以用"()"操作符，来获取当前句子的返回值(部分操作符不能用，如var)。例如：a=3;其实这行的返回值就是3，所以在a=b=3时，JS引擎就可以正确的执行下去，首先3赋值给b,然后当前的返回值3再赋值给a（而不是大家所认

2011-12-02 18:05:36 6272 2

原创 Javascript 链式作用域

看了很多篇文章，终于稍稍理解Javascript的链式作用域了。很感谢Laruence，风雪之隅。其实对于Javascript链式作用域的描述，包括，JS权威指南，都有些太冗长了--但是很准确：JavaScript中的函数运行在他们被定义的作用域里，而不是他们

2011-10-10 16:52:05 1996

<br />IE在对DOM的支持上，不符合DOM的规范。<br />可能是IE在读取到网页源代码后，自动去掉的空格和制表符。<br />一个简单的JS脚本。<br /><div id="id1">test<div id="id2"></div></div><br /><div id="id3"><div id="id4"></div></div><br /><script><br />alert(document.getElementById("id1").childNodes[1].id);//这一段在I

2010-12-06 10:49:00 547

原创 JavaScript 对象模型-执行模型(一)

Javascript作为一个客户端的执行脚本语言，越来越受到行内的关注。开始在学习javascript时，根本没有对这种语言有深层次的理解，就开始使用了。起初只以为js的作用主要就是做本地化数据验证的，随着时间的增长，越发发现javascript的潜力很大。尤其在使用了Jquery和YUI之后。首先下面这篇文章介绍的是JS的基础。关于JS的学习资料有很多，如果只是用JS做做数据验证或者DOM控制，可能和这篇文章干系不大。但如果你对你new一个对象时，它内部操作是什么，或者，究竟Jquery和YUI这些JS的

2010-09-16 17:23:00 561

pusongyang的专栏