Chinaunix首页 | 论坛 | 博客
  • 博客访问: 191830
  • 博文数量: 95
  • 博客积分: 2383
  • 博客等级: 大尉
  • 技术积分: 1135
  • 用 户 组: 普通用户
  • 注册时间: 2011-06-09 15:14
文章分类
文章存档

2012年(84)

2011年(11)

我的朋友
最近访客

分类: 系统运维

2012-05-07 13:27:15

日期:2012-5-4  来源:

使用超酷的jQuery缩略图生成插件NailThumb制作漂亮的缩略图web应用

 

大家在网站开发和web应用中常常需要处理图片,因为用户上传的图片往往尺寸大小各不相同,如何能够生成统一尺寸的缩略图往往是让我们头疼的问题,常规的方 式基本都是使用后台程序PHP,JSP等处理上传后的图片,针对网站或者应用具体需要来切割指定大小的缩略图。主要问题在于你需要开发对应后台相关程序, 并且你一旦指定了缩略图大小后,以后如果希望能够随时修改的话,往往需要对后台代码进行修改,非常麻烦!今天我们将介绍一款超强的jQuery缩略图生成 插件 - ,使用这个插件可以帮助你在前台生成无图像扭曲的缩略图,而且支持前台裁剪,添加图片说明及其动画等功能,相信大家一定会喜欢!

主要特性
  • 自动处理图形分别率,不会生成扭曲的图片
  • 能够添加缩略图特效
  • 支持裁剪
  • 方便的添加图片说明
如何使用

导入jQuery类库,插件js和css,如下:




调用插件方法,如下:

$('.thumbwrapper').nailthumb({});

使用图片的容器元素即可生成缩略图。

图片缩略图展示应用

这里我们将开发一个图片缩略图展示应用,主要代码如下:

HTML








定义俩个容器元素,一个包含了需要生成缩略图的图片,另外一个元素包含了生成的不同大小的缩略图。

....

来源:
阅读(1056) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~