artTxtCount是一个基于jQuery的简单输入字符统计与限制的插件，可以实现类似twitter、新浪微博、腾讯微博等字符统计的效果。 虽然网上已经有好几个同类型的插件了，但是封装过度，实际应用中总是有那么一丝牵绊，因为它们不能指定提示消息的容器。其实我们只需要一个简单的效果就可以了： 预览：http://www.planeart.cn/downs/artTxtCount/

artDialog是一个轻巧且高度兼容的javascript对话框组件，可让你的网页交互拥有桌面软件般的用户体验。 演示地址:artDialog猛击前往 项目主页:http://code.google.com/p/artdialog/ artDialog2采用全新的UI 功能： 支持锁定屏幕(遮罩)、模拟alert和confirm、多窗口弹出、静止定位、支持Ese键关闭对话框、定时关闭、自定义位置、拖动、鼠标调节窗口大小、换肤…… 优点 兼容主流浏览器: 支持IE6和IE6+, Firefox, chrome, Opera, Safari 自适应内容: 无需预设高宽, 对话框自适应消息内容的大小 (包括按钮)，并且支持消息框大小拖动调节 智能消息对齐: 如果设置了对话框宽度，文本会自动居中或者居左对齐 容错: 如果定义的宽度高度小于内容大小不会出现错位, 智能定位: 使用自定义坐标的时候智能修正位置，确保其在可视范围 (适用于弹出菜单) 拖动流畅: 不会粘住鼠标也不会拖出浏览器视口导致无法控制 轻巧: js压缩后不到8KB (在js内嵌了核心兼容布局CSS的情况下) 制订皮肤: 九宫格布局, 钩子完善,制作皮肤相当简易, 内置IE6 png 32透明和定位解决方案。 IE6无抖动静止定位: 在IE6下可实现与现代浏览器一样完美静止定位效果 IE6遮盖下拉控件支持: 支持 IE6 下覆盖下拉控件 (注:半透明皮肤不支持)

(本文示例脚本于2010-05-28更新) 如果说09年是SNS年，那10年肯定微博年，各大网站都推出或者准备推出自己的微博。我这几天都在看新浪微博，对新浪微博的用户体验很欣赏，有些细节我自己也琢磨了下，据我所知其界面是大名鼎鼎的eico设计的，其前端架构很非常不错。 步入正题。 我点击新浪微博缩略图的时候会快速的置换一张大图，并且鼠标会显示放大或者缩小的指针，新浪前端工程师吧视口的大图片都预加载了，所以点击缩略图后替换大图的过程很爽快（PS：大家都知道点击Qzone的缩略图会出现什么）。 这种简约的效果非常适合插在内容区域单幅图片显示，放大后也不会干预用户操作，难怪很多微博客都采用（如：聚友旗下的911微博）。 其中有一个令我很惊讶的功能，图片可以自由旋转，这功能如何实现？ CSS属性？貌似只有IE可以用CSS私有滤镜 javascript？还没有听说过有这个内置方法 服务端处理？极度消耗服务器资源，而且响应会很迟钝 最用用firebug查看才知道是canvas实现的，它是未来的WEB标准的新产物，目前只有IE浏览器不支持它，但IE有个私有滤镜可以实现图片旋转。 图片展示用jQuery做是最轻松不过的是事情，一个预加载图片，一个动画基本上就可以搞定，而canvas图片旋转有个jQuery插件支持，于是我的”artZoom”就踏在前人的肩膀上出来了。 写完最后检测的时候发现IE8对其私有滤镜处理与IE6，IE7不一样，图片旋转后不会替换原来高度，结果把下面的元素盖住了。而新浪微博在IE8下这个BUG也没有修复。 我尝试用js对IE8置换图片长宽处理，仍然无法实现，最后动态改变图片外包元素高度来修复了这个问题。 查看文件： artZoom [需要jQuery库支持，artZoom.js 4kb多一点]

网上的对话框类多得不得了，“art.dialog”有什么优势？ 身材娇小：js压缩后只有4KB多，一张背景图229字节，css文件4KB多。 兼容性强：兼容主流浏览器，视觉效果完全一致（包括IE6无抖动静止）。 自适应内容：对话框可自适应内容大小，无需设置高度与宽度；智能文本对齐。 灵活：CSS钩子机制可任意写入类；对话框弹出位置完全可控。 不错的用户体验：可拖动，不会拖出可视范围；有锁屏功能，防止误操作；ESC键可关闭对话框。 还等什么？赶快预览：http://www.planeart.cn/downs/artDialog/

由于项目需要，我不得不把页面各种交互元素“封装”好，以便统一管理这些样式。这是其中一个选项卡圆角导航，兼容主流浏览器，高度宽度都能自适应。 优点 兼容：IE5.5\IE6\IE7\IE8\..,FireFox,Chrome,Opera,Safari。 可适应文字大小：当火狐等浏览器开启“仅缩放文本”，使用缩放文本功能，这个选项卡图形同样保持比例，照顾视力不好的用户。

本来是一张普通的图片，当它在鼠标靠近的时候它显示出了玻璃特有的高光效果，经过修饰后使原本平淡的图片顿时变得有趣起来，它却没有用复杂的JavaScrpit脚本，完全用CSS实现的。 在线演示：http://www.planeart.cn/downs/glassCss/demo.html 打包下载：http://www.planeart.cn/downs/glassCss/glassCss.rar 这个效果主要是运用了Png图片的支持阿尔法通道特性以及css动态伪类:hover。玻璃遮罩是一个带有半透明的png图片背景的层，通过:hover显示出来。

最近设计了一款世界之窗浏览器3皮肤(已发布在官方论坛)： http://bbs.ioage.com/cn/thread-109576-1-1.html 浅谈理念上的理解： 火狐浏览器在用户体验上明显不及goolge的chrome，原因就输在“轻”上面。火狐的默认配色和布局设计非常单调沉闷，加上先天的启动延时，一直让人感觉他非常沉重。而google则相反，几乎没有一点多余的东西，整个设计感觉就像一张薄纸，轻快小巧！也就是说同样几种浏览器图标放在桌面，我会下意识的点击chrome，而不是火狐，因为长期使用已经让我有了潜意识。 设计感强的界面往往能够在第一时间吸引别人，但是使用时间一长就会发现样式很乏味，尤其设计过度会造成视觉疲劳，用户最终将回归到简约的样式，回到自己最朴素的视觉体验。 所以，我理解的“轻”即是：通过简约的设计，合理的组织交互元素，让人从心理上感觉到产品特有的轻快，更加舒适的与程序交互。 世界之窗程序本身就是很轻巧的，尤其它吸取了chrome的理念之后推出的3.0版更是如此。 浏览器虽然有很多功能，但是人们最常用的却只有个按钮，我在这款设计中重点表现了“前进、后退、标签卡、标签卡滑动条”这几个按钮。淡化不常用按钮的视觉地位，并且把这类按钮用一种视觉样式组织起来，让整个浏览器界面更显简约明朗。 此款皮肤取名叫“翠竹”，青青翠竹，如竹一样“青”巧！

可交互元素（如按钮、连接）在页面中既是最常见也是很重要的，应该重点表现它们。同样是相同功能的按钮，但是由于设计带来的点击率却大大的不同，而点击率却直接影响网站的PV(访问次数)，所以我们不能再忽视它了，那些重要的按钮不要偷懒，在图形上、在用户交互的视觉反馈上多做一点工作。 我们通过视觉上的信息告诉访问者这是可以点击的元素（貌似我说了废话），应该用视觉变化表现如下信息： 可交互元素在页面中的特殊性表达。合理的设计各个元素之间的其主次关系，如导航等。 通过交互产生不同的状态需要出现恰当的视觉反馈。如鼠标靠近出现视觉反馈、是连接还是选项卡（是否会刷新页面）、点击过后的变化等。 通过上面两点一延伸，页面上可交互元素更多的状态需要我们用心去设计，但是我们同时也会减弱那些页面装饰性图片的数量重要性，实际上我们的工作应该会变得更轻松而有趣起来！

这个小东西好像是大一暑假写的，这里面运用了特殊的隐藏技术，功能完全超越了当时网上流行的一款共享软件“文件夹加密大师”。可以满足基本加密需求，放在U盘或者直接把下面代码放在自己博客里面随时备用。 特点： 开源，绿色无需安装，体积小巧，不足5kb。 自动输出一个小红锁的图标并更改加密目录的图标（包括可移动磁盘文件夹的图标）。 加密速度快。 加密后目录不能被误删除。 注意：程序不自动加密子目录 把下面的代码用记事本另存为“加密.CMD”放入要加密的目录后打开即可。