<![CDATA[蜗爱CSS]]> http://www.woaicss.com/ zh-cn PBlog2 v2.4 蜗爱CSS http://www.woaicss.com/images/logos.gif http://www.woaicss.com/ 蜗爱CSS http://www.woaicss.com/article/js/2012031901.htm <![CDATA[js练习28—json跨域数据访问]]> wo-ai-niqq@163.com(woniu) Mon,19 Mar 2012 22:07:31 +0800 http://www.woaicss.com/default.asp?id=300 [demo]
demo 客户端代码：

其中 jsonCallback 是客户端注册的，获取跨域服务器上的json数据后，回调的函数。
src这个 url 是跨域服务器取 json 数据的接口，参数为回调函数的名字，返回的格式为

Jsonp原理：
首先在客户端注册一个callback, 然后把callback的名字传给服务器。

此时，服务器先生成 json 数据。
然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数 jsonp.

最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。

客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时数据作为参数，传入到了客户端预先定义好的 callback 函数里.（动态执行回调函数）
]]> http://www.woaicss.com/article/js/2012031801.htm <![CDATA[js练习27—城市选择]]> wo-ai-niqq@163.com(woniu) Sun,18 Mar 2012 20:03:06 +0800 http://www.woaicss.com/default.asp?id=299
[demo]

   申请友链的同学，有的站打不开，有的跟前端毫无关联，所以抱歉]]> http://www.woaicss.com/article/works/2012031001.htm <![CDATA[[转]从细节做起：设计师们，请善待PSD]]> wo-ai-niqq@163.com(woniu) Mon,12 Mar 2012 11:35:04 +0800 http://www.woaicss.com/default.asp?id=298
　　在企鹅村玩代码玩了半年多，玩起psd来都有点生疏了。 yixieshi

　　最近对设计MM 给的psd文件产生了点暧昧。有感悟抒发一下。看看是不是都有一样的困惑和同样的问题。

如果切图仔死了，死因很可能是一份可怕的psd

　　1. psd 文件尺寸 竟然有71M，(也许看着觉得还好，但是一开ps 就杯具了，内存不够 = =)

　　2. psd 图层上百个，各种看不懂的图层。毫无规律的图层分组让人菊花一紧。

　　3. 设计稿完全是个插画，怎么看都不像个网页，无从下手切图。(恨不得把psd 吃下去 >.<)

　　4. GUI为矢量图，边界不清晰。(切图成果，糊得一比)。

　　作为切图仔，暂时就列了这么些 碰到的问题。相信有和多人有同感。

　　那么作为设计师MM的你们又应该如何去避免呢? 对症下药 一一破解。

合理分层，结构清晰 互联网的一些事

　　不管你做的是设计，还是插画。结构设计也是一种设计，当你合理并且清晰的规划好你的设计稿，那么这个设计就有十之八九了。

那么如何对网页设计稿进行分组分层呢?

　　1. 按框架分。(网页分 ，头部head ， 主题 main，底部 foot，以此类推)。

　　2. 按模块分。(每个小原件，小装饰，合成一个大物件就能做为一个模块)

　　3. 按属性分。(这点比较重要，设计师如果做的是web界面，需要了解什么是“图片输出” 和 “代码输出”, 原因是当切图的时候，我们需要将 “代码输出”类型所属的图层隐藏掉，然后再进行导出)。还有一些注释(注释好重要，后面有讲)相关的东西。

　　4. 按状态分，(web设计跟插画设计 一个很大的区别就是 web设计是有交互的，需要针对各个交互状态进行分层分组) 互联网的一些事

　　“代码输出” 指的是设计稿中的一些效果是可以使用代码来实现的，如后期可编辑的文字(大段文字，小按钮里的宋体文字)，圆角，渐变效果(高级浏览器可实现)。

　　“图片输出” 则是指出了代码输出以外的东西，如图标icon，背景效果，以及一些 使用代码不可实现的文字效果(如艺术字体)。



减少尺寸，去其痔疮是关键

　　如果你做的是大喷绘 psd 有个7,80M 可以理解。但是你做的是web设计稿也那么大，就有点不可理喻啦。

　　毕竟切图仔的电脑总是没有设计师的强大哇，并且我们还要跑个IDE编辑器，跑个虚拟机，再跑N个浏览器。这个时候要是还要打开一个70M的PSD设计稿(预计占用内存1G)，这个时候 谁蛋疼谁知道哇 囧rz 互联网的一些事

　　所以对切图仔好点，把psd弄小点。如何弄小点，往下看。(毕竟俺是过来人 ^__^). yixieshi

　　1.去除没用的大尺寸素材图层，(当设计稿需要交接给切图仔的时候，最好复制一份设计稿，去除psd中无用处的原始素材图)。因为素材图片是唯一难压缩的东西(psd尺寸大很多时候是因为这个)，且运行时占内存大。

　　2.去除无关图层，(这个是禁忌哇，如果跟设计稿不相关的最好删掉，或者新建一个temp组丢那里面，不然很容易误导切图仔，而且还占内存，别以为隐藏掉就不占内存啦 XD)。 一些事

　　3.慎用智能图层。(智能图层在CS4的时候就开始有了。) 很好用，因为不影响原素材的质量，如放大缩小，但是TMD 占内存，吃cpu哇 >.<

　　4.合并列表型块状设计，(这点很纠结，也很重要) web设计稿中有一些设计是列表型的。如：文章列表，信息列表。通常设计的时候是先制作一份，然后复制个十几个。 但是。。。。但是，复制太多了占内存哇。0 0，果断保留关键的一份，或者表示几种状态的几份。然后把其他的都合并图层了。 相信我，这样做切图仔会很开心。^__^

边界清晰，不再模糊

　　web设计中，最忌讳糊糊的感觉了。因为很多东西是需要精确到像素的。 互联网的一些事

　　1.形状模糊，有些时候使用形状工具因为没有对齐到像素(见配图),导致做出来的形状边缘都糊糊的。 一些事

　　解决办法很简单，使用选取工具(A)，小移一下形状让它对齐到像素即可，或者干脆栅格化形状擦去模糊的部分即可。

　　2.素材模糊，素材让人觉得糊糊得看起来不是那么专业? 简单的锐化一下，会发现很好用(我用的比较多的就是USM锐化)。 互联网的一些事

　　3.文字模糊，有些时候发现矢量的字体怎么调大小都觉得边缘糊糊的。果断，复制一份(备份用)，然后栅格化，小小的锐化一下。^_^



良好的注释图层，凸现专业气质

　　代码需要注释，设计稿也同样需要注释。同样是两份设计稿，相信你一定很喜欢带注释的设计稿。 一些事

　　相信我，给你的psd 新建一个组叫注释(comments)，那么切图仔的眼睛里一定闪烁着晶莹的东西。^__^]]> http://www.woaicss.com/article/js/2012011101.htm <![CDATA[javascript-获取数组最大元素索引]]> wo-ai-niqq@163.com(woniu) Wed,11 Jan 2012 17:48:06 +0800 http://www.woaicss.com/default.asp?id=297 ]]> http://www.woaicss.com/article/js/20120104.htm <![CDATA[js练习26—事件委托]]> wo-ai-niqq@163.com(woniu) Thu,05 Jan 2012 00:09:22 +0800 http://www.woaicss.com/default.asp?id=291
例如需要下面三个li上分别绑定不同的事件：

[demo]
通常写法：

事件委托写法：

优点：
事件委托对于web应用程序的性能有如下几个优点：
1.需要管理的函数变少了
2.占用的内存少了
3.javascript代码和Dom结构之间的关联更少了
相关：
JavaScript中的事件委托
firefox 和 ie 事件处理的细节,研究,再研究-----书写同时兼容ie和ff的事件处理代码]]> http://www.woaicss.com/article/js/20120102mark.htm <![CDATA[高效javascript—Mark地址]]> wo-ai-niqq@163.com(woniu) Mon,02 Jan 2012 23:50:29 +0800 http://www.woaicss.com/default.asp?id=290 [高效javascript]]]> http://www.woaicss.com/article/js/20110101.html.htm <![CDATA[js练习25—通过class选择页面元素]]> wo-ai-niqq@163.com(woniu) Sun,01 Jan 2012 11:12:09 +0800 http://www.woaicss.com/default.asp?id=289

[demo]]]> http://www.woaicss.com/article/js/20111224.html.htm <![CDATA[js练习24—弹出隐藏层]]> wo-ai-niqq@163.com(woniu) Sat,24 Dec 2011 16:29:57 +0800 http://www.woaicss.com/default.asp?id=288
[demo]]]> http://www.woaicss.com/article/js/2011112901.htm <![CDATA[js练习23—仿flash图片轮换(二)]]> wo-ai-niqq@163.com(woniu) Tue,29 Nov 2011 23:33:17 +0800 http://www.woaicss.com/default.asp?id=285 [demo]]]> http://www.woaicss.com/article/js/2011112601.htm <![CDATA[js练习22—仿flash图片轮换(一)]]> wo-ai-niqq@163.com(woniu) Sat,26 Nov 2011 23:57:06 +0800 http://www.woaicss.com/default.asp?id=284
[demo]]]>