图片查看器,github地址:https://github.com/VaJoy/imgViewer 效果如下: 这款当初大概写了2小时,有点匆忙地赶出来的,使用的接口很简单: 它的实现其实也没啥复杂的原理,唯一觉得可说的地方是图片展开的过程 —— 从小变大动态过程的实现。主要是靠这一段代码实现的: 也就是先用 .css() 将它缩小和定位到中间(如上代码我们先把宽高均缩到100px),再通过 .animate() 把它放大,具体数值通过一些小学数学的计算就能得出的(毕竟图片宽高、窗口大小等数值都是可知的),这里不赘言。 接着是一款分类选择器,github地址:https://github.com/VaJoy/categorySelector 效果如下: 使用接口如下: 其中 option 的可选值如下: 具体功能建议配合 demo.html 来查看。 这款插件是今天赶出来的,暂时还没测到什么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>**</style>"),再插到head去,这样代码会好看一点,不过一来要防止重复插入该style标签,二来是给元素加上对应的类名,维护起来的话,倒是没有⑵那么直观,三来则是可能污染别人的类名; ⑷ 写个api供用户参考,让用户自己在页面上写对应的样式。这样对用户而言定制性更高些,但是感觉比⑴更麻烦,不够人性化。 个人还是使用⑵多一点,当然如果复用很高的样式,可以靠⑶来解决。 |
发布两款JQ小插件(图片查看器 + 分类选择器)
最新推荐文章于 2024-08-23 08:18:04 发布