图片查看器,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: "请选择类别", //弹出框标题
emptyText:"", //如果初始值为空,可自定义初始内容
itemNum: 3, //最多可选择的个数
groupTitle_enable: true, //小组标题是否可选
splitor: ",", //分隔符
callback: !1, //回调
emptyEnable:!1 //是否选项可为空
};

具体功能建议配合 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>XXXX</style>"),再插到head去,这样代码会好看一点,不过一来要防止重复插入该style标签,二来是给元素加上对应的类名,维护起来的话,倒是没有⑵那么直观,三来则是可能污染别人的类名;

⑷ 写个api供用户参考,让用户自己在页面上写对应的样式。这样对用户而言定制性更高些,但是感觉比⑴更麻烦,不够人性化。

个人还是使用⑵多一点,当然如果复用很高的样式,可以靠⑶来解决。

上述两款插件都很轻巧,功能也单一少冗余,有兴趣的朋友可以试着使用它们,或者对它们进行功能扩展。

具体的实例请参照对应的html页面文件。

共勉~

发布两款JQ小插件(图片查看器 + 分类选择器),开源的更多相关文章

  1. jQuery功能强大的图片查看器插件

    简要教程 viewer是一款功能强大的图片查看器jQuery插件.它可以实现ACDsee等看图软件的部分功能.它可以对图片进行移动,缩放,旋转,翻转,可以前后浏览一组图片.该图片查看器还支持移动设备, ...

  2. 分享一款强大的图片查看器插件,手机PC 通吃,功能超级齐全!

    一款强大的图片查看器插件,手机PC 通吃,功能超级齐全! 地址:http://photoswipe.com/

  3. 用JQ仿造礼德财富网的图片查看器

    现在就职于一家P2P平台,自然也会关注同行其它网站的前端技术,今天要仿造的是礼德内页的一个图片查看器效果.不过说白了,无论人人贷也好礼德财富也好,很多地方的前端都做的不尽如人意,比如忽略细节.缺乏交互 ...

  4. 强大的jQuery图片查看器插件Viewer.js

    简介 Viewer.js 是一款强大的图片查看器 Viewer.js 有以下特点: 支持移动设备触摸事件 支持响应式 支持放大/缩小 支持旋转(类似微博的图片旋转) 支持水平/垂直翻转 支持图片移动 ...

  5. 宏碁发布两款全A平台笔记本:良心价

    导读 8月3日消息,在全球数码互动娱乐盛会ChinaJoy上,宏碁推出全新两款全A平台笔记本——暗影骑士4 锐龙版酷冷游戏本和蜂鸟Swift3锐龙版金属轻薄本. 此次发布的宏碁暗影骑士4 锐龙版笔记本 ...

  6. js手写图片查看器(图片的缩放、旋转、拖拽)

    在做一次代码编辑任务中,要查看图片器.在时间允许的条件下,放弃了已经封装好的图片jq插件,现在自己手写js实现图片的缩放.旋转.推拽功能! 具体代码如下: <!DOCTYPE html> ...

  7. js实现图片查看器(图片的缩放、旋转、拖拽)

    一.关于图片查看器. 目前网络上能找到的图片查看器很多,谁便一搜就能出来.如:jquery.iviewer.js.Viewer.js这两个js文件,其中功能也足够满足大部分开发需求.但是单纯的就想实现 ...

  8. 使用 PyQt5 实现图片查看器

    一.前言 在学习 PyQt5 的过程中我会不断地做一些小的 Demo,用于让自己能够更好地理解和学习,这次要做的就是一个图片查看器,主要功能包括打开图片.拖动图片.放大和缩小图片. 最终实现的图片查看 ...

  9. Objective-C ,ios,iphone开发基础:快速实现一个简单的图片查看器

    新建一个single view 工程: 关闭ARC , 在.xib视图文件上拖放一个UIImageView  两个UIButton ,一个UISlider ,布局如图. 并为他们连线, UIImage ...

随机推荐

  1. AgileEAS.NET SOA 中间件平台.Net Socket通信框架-介绍

    一.前言 AgileEAS.NET SOA 中间件平台是一款基于基于敏捷并行开发思想和Microsoft .Net构件(组件)开发技术而构建的一个快速开发应用平台.用于帮助中小型软件企业建立一条适合市 ...

  2. 【leetcode】Merge Sorted Array

    题目描述 Given two sorted integer arrays A and B, merge B into A as one sorted array. Note: You may assu ...

  3. OS X 下不通过Homebrew安装ASP.NET 5开发环境

    在 ASP.NET 的 Home repo 里,推荐使用 Homebrew 安装开发环境,不过我的电脑里已经有 ports 了,这应该是当年用 rvm 安装 Ruby 时悄悄地装上的吧.不管怎样,作为 ...

  4. js 弹出确认 取消对话框

    一种: <a href="javascript:if(confirm('确实要删除该内容吗?')){location='http://www.google.com'}"> ...

  5. 关于安装Apache之后,解析PHP的配置

    需要配置四个地方 LoadModule php5_module modules/libphp5.soServerName localhost:80DirectoryIndex index.phpAdd ...

  6. C++常用特性原理解析

    在我的早期印象中,C++这门语言是软件工程发展过程中,出于对面向对象语言级支持不可或缺的情况下,一群曾经信誓旦旦想要用C统治宇宙的极客们妥协出来的一个高性能怪咖. 它驳杂万分,但引人入胜,出于多(mi ...

  7. 2019年台积电进军AR芯片,将用于下一代iPhone

    近日,有报道表示台积电10nm 芯片可怜的收益率可能会对 2017 年多款高端移动设备的推出产生较大的影响,其中自然包括下一代 iPhone 和 iPad 机型.不过,台积电正式驳斥了这一说法,表明1 ...

  8. 回流(reflow)与重绘(repaint)

    最近项目排期不紧,于是看了一下之前看了好久也没看明白的chrome调试工具的timeline.但是很遗憾,虽然大概懂了每一项是做什么的,但是用起来并不能得心应手.所以今天的重点不是timeline,而 ...

  9. ubuntu16.04 install flash

    今天安装了一下flash,发现不同版本的Ubuntu复制的位置不同,此处介绍Ubuntu16.04的安装方式 1.首先下载flash,下载tar.gz的 2.解压缩到当前目录 3,打开terminal ...

  10. 二、JSP、servlet、SQL三者之间的数据传递(前台与后台数据交互)

    2.收信息来到表单提交时URL所指向的servlet文件,获取传递过来的参数值