标签：
图片查看器，github地址：https://github.com/VaJoy/imgViewer
效果如下：
这款当初大概写了2小时，有点匆忙地赶出来的，使用的接口很简单：
$.bindViewer(".viewer-item");
它的实现其实也没啥复杂的原理，唯一觉得可说的地方是图片展开的过程 —— 从小变大动态过程的实现。主要是靠这一段代码实现的：
$(this).css({"top": win_h / 2 + sroll_t, "margin-left": sroll_l - 50, "margin-top": "-50px", "width": "100px", "height": "100px", "opacity": "0"}) .animate({"opacity": "1", "margin-left": -img_w / 2, "margin-top": -img_h / 2, "width": img_w, "height": img_h}, 300, function () { //...
也就是先用 .css() 将它缩小和定位到中间（如上代码我们先把宽高均缩到100px），再通过 .animate() 把它放大，具体数值通过一些小学数学的计算就能得出的（毕竟图片宽高、窗口大小等数值都是可知的），这里不赘言。
接着是一款分类选择器，github地址：https://github.com/VaJoy/categorySelector
效果如下：
使用接口如下：
$("XX").bindCategory(option);
其中 option 的可选值如下：
var option = { data: [ //数据 { "id": "1", "name": "游戏", "items": [ {"id": "21", "name": "益智游戏"}, {"id": "22", "name": "角色扮演"}, {"id": "23", "name": "儿童游戏"} ] }, { "id": "2", "name": "书籍", "items": [ {"id": "31", "name": "地图雏形"}, {"id": "32", "name": "商务理财"}, {"id": "33", "name": "浪漫偶像"}, {"id": "34", "name": "社交人文"}, {"id": "35", "name": "儿童教学"}, {"id": "36", "name": "建筑工程"}, {"id": "37", "name": "科学技术"} ] }, { "id": "3", "name": "应用", "items": [ {"id": "50", "name": "网络工具"}, {"id": "52", "name": "系统必备"}, {"id": "53", "name": "辅助工具"} ] } ], theme: "#2cbaa0", //主题色 title: "请选择类别", //标题 itemNum: 3, //最多可选择的个数 groupTitle_enable: true, //小组标题是否可选 splitor: "," //分隔符 }
这款插件是今天赶出来的，暂时还没测到什么bug，如果有bug欢迎issues上提。之前测到一个问题，发现有个文本样式在IE和chrome都执行的好好的，偏偏火狐下无效，折腾了点时间才发现原来是 font:12px/1.2 "Arial","Microsoft Yahei" 被我写成了 font:12px/1.2 "Arial" "Microsoft Yahei" 。
插件的源码其实也基本写满相关注释了，仔细研究下很容易理解其原理。个人觉得插件最繁琐的地方还是对样式的处理，个人觉得这块可以有四种处理方案：
⑴ 像bootstrap那样分离个独立的XX.css文件出来供用户选择，但这种方式意味着要用户再引入一个样式文件（如果是供用户切换主题倒是推荐这种方式）；
⑵ 直接内联写在元素内，比如$elem.css("XX","XX")、$("<div style=‘XXX‘></div>")。这种方式比较常用，样式优先级也最高，但会让代码看着乱糟糟的；
⑶ 生成一个style标签，比如$("<style>XXXX</style>")，再插到head去，这样代码会好看一点，不过一来要防止重复插入该style标签，二来是给元素加上对应的类名，维护起来的话，倒是没有⑵那么直观，三来则是可能污染别人的类名；
⑷ 写个api供用户参考，让用户自己在页面上写对应的样式。这样对用户而言定制性更高些，但是感觉比⑴更麻烦，不够人性化。
个人还是使用⑵多一点，当然如果复用很高的样式，可以靠⑶来解决。
上述两款插件都很轻巧，功能也单一少冗余，有兴趣的朋友可以试着使用它们，或者对它们进行功能扩展（特别是分类选择器，暂时只支持二级数据，还没加上对一级或者更多级数据的支持）。
具体的实例请参照对应的html页面文件。
共勉~
标签：
原文地址：http://www.cnblogs.com/vajoy/p/4230983.html
