欢迎莅临阿Q的项目

专业WP商业设计开发销售中心

QQWorldPhotoCutter - 简单的jQuery缩略图插件

这是之前制作的创建固定大小的缩略图的JS脚本的jQuery插件版本,依然具有图片预载功能,且脱离了css文件,不需要手动创建容器。

这是之前制作的创建固定大小的缩略图的JS脚本的jQuery插件版本,依然具有图片预载功能,且脱离了css文件,不需要手动创建容器。

使用方法

1、调用jQuery类库和插件(如果已经调用了jQuery,可以省略第一行)

[syntaxHighLighter brush="js"]<script src="http://ajax.cat.net/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="js/jquery.QQWorld_PhotoCutter-min.js"></script>[/syntaxHighLighter]

2、在需要缩略的图片上加上特定标记

[syntaxHighLighter brush="html"]<img rel="cut_me" src="photo.jpg" />
<a href="#"><img rel="cut_me" src="photo.jpg" /></a>[/syntaxHighLighter]

3、激活插件的方法(将图片缩略为宽度150x120,并将图片外的容器class设置为myPhoto):

[syntaxHighLighter brush="js"]$("img[rel='cut_me']").QQWorldPhotoCutter({
width: 150,
height: 120,
class_name: 'myPhoto'
});[/syntaxHighLighter]

更新历史

  1. v1.0.3 - 2012.3.15 - 因为ie7下不能将json类的名字设置为class,将class改为class_name
  2. v1.0.2 - 2012.3.2 - 修复判断图片缓存预载之前就运行缩略功能,导致无法获取图片的width的问题
  3. v1.0.1 - 2011.10.19 - 添加可以设置外部容器class的功能
  4. v1.0.0 - 2011.10.18

[demo demo='#' download='https://www.qqworld.org/demo/jQuery/qqworld-photocutter/jquery.QQWorld_PhotoCutter.lastest.zip']

如果喜欢本文,请分享给朋友们

QQWorldPhotoCutter - 简单的jQuery缩略图插件1 篇评论