最新消息:

第98款插件:jqthumb.js缩略图插件-让缩略图正常显示而不变形

Jquery插件 杨红伟 10136浏览 0评论

一、插件介绍

项目中有图片的时候,有的宽大于高,有的宽小于高,尤其在做图片列表的时候,经常发现缩略图会有变形的。我们怎样来解决这一问题呢。

方法一:用photoshop来处理缩略图。小的项目还可以,大的项目,这样做难免会累的半死;

方法二:用jqthumb.js这款插件,只需要写上几句话,就可以让我们的项目中的缩略图快速解决!

jQThumb 兼容所有浏览器,包括 IE6。在高级浏览器中使用背景方式实现,并设置图片的尺寸(background-size)和位置(background-position)实现居中;在 IE6 等老旧的浏览器中使用图片的方式实现,并使用绝对定位和 margin 实现居中。

二、插件图片、DEMO及下载

三、插件作者下载地址

作者: Pak Cheong

最新版本 : 1.9.3

需要 : jQuery >=v1.3.0 or Zepto (with zepto-data plugin) >=v1.0.0

官方下载地址: https://github.com/pakcheong/jqthumb

官方本站下载: http://www.ijquery.cn/demo/jqthumb/jqthumb-1.9.3.zip

官方本站查看: http://www.ijquery.cn/demo/jqthumb/jqthumb-1.9.3/src/demo.jquery.html

官方本站查看: http://www.ijquery.cn/demo/jqthumb/jqthumb-1.9.3/src/demo.zepto.html

四、兼容性

需要jquery1.3.0版以上,或者 zepto1.0.0以上。

IE Chrome Firefox Opera Safari
IE6+ ✔ Chrome ✔ Firefox ✔ Opera ✔ Safari ✔


五、最简使用教程

1、引入文件

<script src="js/jquery.min.js"></script>
<script src="js/jqthumb.min.js"></script>

2、JavaScript

$(function(){
    $('img').jqthumb();
});

五、参数

属性/方法 类型 默认值 说明
classname ‘jqthumb’ 缩略图容器的 class
width 整数 100 缩略图的宽度,单位为 px
height 整数 100 缩略图的高度,单位为 px
position {top:’50%’, left:’50%’} 缩略图的位置,默认为 50%,即水平并且垂直居中
source 字符串 ‘src’ 指定图像源属性,默认为 src
showoncomplete 布尔值 true 处理后时候立即显示,如果为 false 则不自动显示,需要额外设置让它显示,比如使用回调函数 after、done
before 函数 处理前的回调函数
after 函数 某一个图片处理后的回调函数
done 函数 所有图片处理后的回调函数
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址