<![CDATA[前端技术]]> http://www.cssrain.cn/ zh-cn PBlog2 v2.4 前端技术 http://www.cssrain.cn/images/logos.gif http://www.cssrain.cn/ 前端技术 http://www.cssrain.cn/default.asp?id=1433 <![CDATA[CutePsWheel javascript libary：控制输入文本框为可使用滚轮控制的js库.]]> cssrain@gmail.com(admin) Fri,05 Feb 2010 14:23:03 +0800 http://www.cssrain.cn/default.asp?id=1433 Plugin Name : CutePsWheel javascript libary：控制输入文本框为可使用滚轮控制的js库.
Author : walkingp
Blog : http://www.51obj.cn/
欢迎投递你的插件，投递地址 ： http://www.cssrain.cn/demo/1/mail.html
或者发送到 CssRain@gmail.com

CutePsWheel javascript libary

简介:

用于控制输入数字类型文本框实现鼠标滚轮上下滑动改变值，支持正整数、小数类型输入文本。

   * 兼容IE/Firefox/Opera/Safari/Chrom
   * 可定义滚动变化间隔值，支持整数、浮点数
   * 双击恢复初始值
   * 仅3.92K，压缩后2.67K

预览：http://www.51obj.cn/demo/js/CutePsWheel/demo.html
下载：http://www.51obj.cn/demo/js/CutePsWheel/cutePsWheel_0_9_1.js
演示代码：http://www.51obj.cn/demo/js/CutePsWheel/cutePSWheel.rar

jQuery版本：
http://cssrain.cn/demo/jsWheel/demo2.html    

]]> http://www.cssrain.cn/default.asp?id=1432 <![CDATA[JavaScript单元测试工具 — QUnit。]]> cssrain@gmail.com(admin) Thu,04 Feb 2010 22:55:24 +0800 http://www.cssrain.cn/default.asp?id=1432 Plugin Name : 动态增加input
Author : oncoding
Blog : http://www.oncoding.cn/
欢迎投递你的插件，投递地址 ： http://www.cssrain.cn/demo/1/mail.html
或者发送到 CssRain@gmail.com

文档：http://docs.google.com/View?id=dft4vhq9_33gd3zhwf6

]]> http://www.cssrain.cn/default.asp?id=1431 <![CDATA[ js中鼠标滚轮事件详解.]]> cssrain@gmail.com(admin) Thu,04 Feb 2010 09:39:12 +0800 http://www.cssrain.cn/default.asp?id=1431 之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用js对鼠标滚轮事件进行控制，滚轮事件其中考虑浏览器兼容性问题

附加事件

其中经我测试，IE/Opera属于同一类型，使用attachEvent即可添加滚轮事件。


   /*IE注册事件*/
   if(document.attachEvent){
   document.attachEvent('onmousewheel',scrollFunc);
   }

Firefox使用addEventListener添加滚轮事件

   /*Firefox注册事件*/
   if(document.addEventListener){
       document.addEventListener('DOMMouseScroll',scrollFunc,false);
   }

Safari与Chrome属于同一类型，可使用HTML DOM方式添加事件

   window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome

其中除Firefox外其余均可使用HTML DOM方式添加事件，因此添加事件使用以下方式

   /*注册事件*/
   if(document.addEventListener){
       document.addEventListener('DOMMouseScroll',scrollFunc,false);
   }//W3C
   window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome

detail与wheelDelta

判断滚轮向上或向下在浏览器中也要考虑兼容性，现在五大浏览器（IE、Opera、Safari、Firefox、Chrome）中Firefox 使用detail，其余四类使用wheelDelta；两者只在取值上不一致，代表含义一致，detail与wheelDelta只各取两个值，detail只取±3，wheelDelta只取±120，其中正数表示为向上，负数表示向下。

   <p><label for="wheelDelta"> 滚动值:</label>(IE/Opera)<input type="text" id="wheelDelta" /></p>
   <p><label for="detail"> 滚动值:(Firefox)</label><input type="text" id="detail" /></p>
   <script type="text/javascript">
   var oTxt=document.getElementById("txt");
   /***********************
   * 函数：判断滚轮滚动方向
   * 作者：walkingp
   * 参数：event
   * 返回：滚轮方向 1：向上 -1：向下
   *************************/
   var scrollFunc=function(e){
       var direct=0;
       e=e || window.event;

       var t1=document.getElementById("wheelDelta");
       var t2=document.getElementById("detail");
       if(e.wheelDelta){//IE/Opera/Chrome
           t1.value=e.wheelDelta;
       }else if(e.detail){//Firefox
           t2.value=e.detail;
       }
       ScrollText(direct);
   }
   /*注册事件*/
   if(document.addEventListener){
       document.addEventListener('DOMMouseScroll',scrollFunc,false);
   }//W3C
   window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome/Safari
   </script>

预览效果http://www.51obj.cn/demo/js/wheelDelta_detail.html

（部分图片见原文：http://www.51obj.cn/?p=637）
（以上内容部分内容参考了http://adomas.org/javascript-mouse-wheel/ ）]]> http://www.cssrain.cn/default.asp?id=1430 <![CDATA[js 仿Photoshop鼠标滚轮控制输入框值.]]> cssrain@gmail.com(admin) Wed,03 Feb 2010 09:49:14 +0800 http://www.cssrain.cn/default.asp?id=1430 　　
　　

Plugin Name : js 仿Photoshop鼠标滚轮控制输入框值
Author : walkingp
Blog : http://www.51obj.cn/
欢迎投递你的插件，投递地址 ： http://www.cssrain.cn/demo/1/mail.html
或者发送到 CssRain@gmail.com

 一直很想做这个效果，原理是监听鼠标滚轮事件；可将此效果继续发散到其他应用上，如图片缩放，页面缩放等。

已经ff、ie、opera测试，但chrome尚不通过。

查看效果 http://www.51obj.cn/demo/js/wheel.html
                  http://cssrain.cn/demo/jsWheel/demo1.html    

jQuery版本：
                  http://cssrain.cn/demo/jsWheel/demo2.html    

]]> http://www.cssrain.cn/default.asp?id=1429 <![CDATA[jQuery api plugin for Google Chrome.]]> cssrain@gmail.com(admin) Tue,02 Feb 2010 14:27:46 +0800 http://www.cssrain.cn/default.asp?id=1429 把小飞的jQuery1.4API简单的做成了一个google浏览器的插件，方便大家查阅。

插件下载：
https://chrome.google.com/extensions/detail/ibnnamfohbhmflccioindjabjidiehib

其他插件下载：
https://chrome.google.com/extensions?hl=zh-cn

新手上路：
http://code.google.com/chrome/extensions/getstarted.html

]]> http://www.cssrain.cn/default.asp?id=1428 <![CDATA[jQuery插件练习---动态增加input V3.0. ]]> cssrain@gmail.com(admin) Fri,29 Jan 2010 20:50:52 +0800 http://www.cssrain.cn/default.asp?id=1428 Plugin Name : 动态增加input
Author : Mr.Zhang
Email : jsw0528@MrZhang.net
Blog : http://www.MrZhang.net
欢迎投递你的插件，投递地址 ： http://www.cssrain.cn/demo/1/mail.html
或者发送到 CssRain@gmail.com

演示：http://ilikejquery.com/addInput/

下载：http://code.google.com/p/asp-cwb/downloads/list

 更多：http://ilikejquery.com/


2010.02.01更新：

addInput正式更名为EasyInsert，延续之前的版本号

type新增custom和select两种类型，详见Demo5

Demo：http://IlikejQuery.com/EasyInsert/

Download：http://asp-cwb.googlecode.com/files/EasyInsert-4.0.rar

 

]]> http://www.cssrain.cn/default.asp?id=1427 <![CDATA[jQuery插件练习---动态增加input V2.0.]]> cssrain@gmail.com(admin) Thu,28 Jan 2010 21:03:49 +0800 http://www.cssrain.cn/default.asp?id=1427 Plugin Name : 动态增加input
Author : Mr.Zhang
Email : jsw0528@MrZhang.net
Blog : http://www.MrZhang.net
欢迎投递你的插件，投递地址 ： http://www.cssrain.cn/demo/1/mail.html
或者发送到 CssRain@gmail.com

演示：
http://www.cssrain.cn/demo/addInputByZhang/addInput/index.htm

下载：
http://www.cssrain.cn/demo/addInputByZhang/addInput.rar

]]> http://www.cssrain.cn/default.asp?id=1426 <![CDATA[jQuery插件练习---动态增加input V1.0.]]> cssrain@gmail.com(admin) Tue,26 Jan 2010 20:17:47 +0800 http://www.cssrain.cn/default.asp?id=1426 Plugin Name : 动态增加input
Author : Mr.Zhang
Email : jsw0528@MrZhang.net
Blog : http://www.MrZhang.net
欢迎投递你的插件，投递地址 ： http://www.cssrain.cn/demo/1/mail.html
或者发送到 CssRain@gmail.com

演示：
http://www.cssrain.cn/demo/addInputByZhang/demo.htm

]]> http://www.cssrain.cn/default.asp?id=1425 <![CDATA[ jQuery1.4新功能介绍。]]> cssrain@gmail.com(admin) Sat,23 Jan 2010 09:15:17 +0800 http://www.cssrain.cn/default.asp?id=1425 感谢 coolnalu 的翻译。

文档地址：http://docs.google.com/View?docID=dft4vhq9_32fkj7jnc5&revision=_latest

]]> http://www.cssrain.cn/default.asp?id=1424 <![CDATA[关于Fireworks 和Photoshop两者之间图片优化的比较]]> cssrain@gmail.com(bujichong) Thu,10 Dec 2009 09:34:35 +0800 http://www.cssrain.cn/default.asp?id=1424 原创地址：http://www.webdesignerwall.com/general/fireworks-vs-photoshop-compression/

具体不翻译细节，本人英文一般凑合着看，对于英文稍微鸟一点，技术鸟一点的同学们简单解释一下
，另外，应该说我不是在翻译这篇文章，而是共同探讨，加入了很多我自己的想法，有很多注解

Fireworks vs Photoshop Compression
Fireworks 与photoshop的图片优化能力比较

Surprisingly enough, based on the findings from my recent survey there are quite a bit of Fireworks users. Personally, I never used Fireworks. Photoshop is alway my first choice for designing—from image editing to designing mock-ups. But, did you know that Fireworks is way better than Photoshop in term of image compression? I’m not a software engineer, I can’t explain why Fireworks can compress better. But I can prove it to you by showing a series of experiments I did.
简单说作者是一直坚持用photoshop的，无论做网页设计还是图片优化都是如此，但作者经实验实际发现fireworks在图片优化上有很好的性能

PNG Compression
以PNG格式优化输出的比较
For testing purpose, I used an un-compressed image with transparency. I used Photoshop to export the image to PNG-24 with transparency and the resulting file size is about 352 kb. Then I used the same image and exported it to PNG-32 with Fireworks. The file size is about 332 kb. Visually, they both look the same (at least to me). In term of file size, the image exported with Fireworks is about 20 kb less.

如下图效果：photoshop以png24格式输出，fireworks以png32输出，（不羁虫：个人认为这2个格式在2个软件里输出格式名称不同，实际是相同的，我把ps导出的png24格式拖到fs里打开就是png32格式，而fs里还有一个png24格式输出，个人感觉fs里的png24类于优化质量100%的jpg，有时kb数比jpg稍微小一些）实际得出fireworks得到的图片尺寸比photoshop要小20kb（不羁虫：应该说图片的品质是一样的，我是没看出差别来）




GIF Compression
以GIF格式优化输出的比较
Next I exported the image to GIF 256 colors, adaptive, with no dither. The results are: Fireworks = 88kb, Photoshop = 92kb. That is 4 kb less. Also, they don’t look the same. I prefer the image exported with Fireworks because it has more image details.
如下面图所示，这次以gif256色导出图片，结果fireworks88kb，photoshop92kb，从尺寸上来看只相差4k而已，但是从导出的图片细节来看，fireworks导出的图片细节更多，看上去效果更好




JPG Compression
以JPG 格式优化输出的比较
Now, I’m going to try the JPG compression with a different image. I exported the image with Photoshop to 60% quality JPG and the file size is 80 kb. Then I exported the same image with Fireworks to 80% quality JPG and the result is 72 kb. Both exported images look pretty much the same, but Fireworks beats Photoshop by 8 kb in this case.
如下图：最后是以jpg格式输出的比较，在photoshop以品质60%导出，fireworks下以品质80%导出，（不羁虫：作者的体会和我一样，这2个软件导出品质不同，ps里的60%效果相当于fs里的80%），图片看上去效果差不多，不过尺寸上还是fireworks胜出，fs72kb,ps80kb。



Please note: Fireworks and Photoshop have different compression technology. 80% compression rate in Fireworks is relevant to Photoshop 60% compression rate.

What Is The Big Deal?
有什么大问题？
You’re probably thinking: what is the big deal? It is only a few kilobytes… Well, don’t under estimate the little difference in kilobytes, it can make a big difference on your bandwidth and load time. Lets use the background image on WebDesignerWall as an example. If I export the background with Fireworks, I can reduce its file size by 20 kb. I get about 16,000 visits per day on average. 20 kb x 16, 000 = 320, 000 kb. Yes, that is 320 megabytes per day! I’m only talking about the background image here. Could you imagine how much bandwidth I can save if I compress all the graphics on the site with Fireworks? Most importantly, I can make my site load faster and that is a big deal!
这段想法是比较深远滴，我就半参着自己的想法讲了：可能从优化上来讲，从上面的实验我们可以看到，一个图片优化下来想得到同样效果的图片，ps和fs虽然只差3，5k（视图片尺寸和格式，尺寸越大的图片，这个差距应该是越大），但如果整站下来，你会发现，fs优化后得出的图片尺寸整体要比ps要小很多，而从单个图片来看，如果一个图片能小20kb，而你的网站每天的访问量如果是1万6，那网站所要承担的流量差距是：20k*16000=320m，而从用户体验上来讲，更快的下载将给浏览者带来更好更快的加载效果，更好的用户体验，这是个很大的问题！




Conclusion
结论：
If you have Photoshop and Fireworks installed on your computer, try it yourself. You will be surpised with the results. From now on, I’m going to use Fireworks to export my web graphics, particularly the template graphics.
不用说了，如果你还在使用ps优化网页图片的话，赶紧换用fireworks吧，ps不是万能的，用fs优化图片的、将得到更好的效果，而且优化图片的方式你会发现ps的切片将会让你的优化操作更快更准确


最后，我觉得很讽刺也比较可笑的是：
我想作为大多数fs用户着来讲，很多还和我一样，停留在使用fireworks8的阶段，
对adobe这几年对fs的更新实在是很失望，
cs3,cs4里实在是没有太多有用的东西，
除了添加了不能兼容的ps图层效果和一些莫名其妙的多页面导出方式之外，
真没有看到什么有用的更新，
而且安装文件的大小是成倍的往上翻，真是很adobe，
可以说adobe对fs的态度基本是不改进也不丢弃，fs完全处于不死不活的状态，

可是当你真正熟悉fireworks时，你会发现在fs里做个web2.0的按钮是多么的方便快捷，
虽然只是8.0版，2005年上市的软件，但图片的优化能力，现在的ps根本没法比，这确实是个讽刺，
当然使用8.0版还有一个好处，估计adobe是不会来向你收版权费，
呵呵，毕竟fireworks8.0还是属于MacroMedia，没有什么adobe验证措施，
你就是全公司办公人员装了fs8.0，adobe也不会来向你要版权费

希望越来越多的网页前端工作者加入使用fireworks的行列，
当你熟悉他以后，你会发现fireworks才是真正为网页设计及优化而生的软件

]]>