Jqthumb记录使用

1.引入Jqthumb.js
在BootStrap中我们找不到解决办法,所以我们需要借助其它工具。Jqthumb插件是专门用来为图片生成缩略图的,它可以从图片中的任何坐标点开始取指定大小的图片区域作为图片的缩略图。你可以点击 https://github.com/pakcheong/jqthumb 来下载它,并将其应用到项目中(假设在当前项目中,jqthumb.js放置在scripts文件夹中):

2.在图片加载(onload)的时候调用DrawImage()函数来生成缩略图
DrawImage()函数正是基于jqthumb.js库的,注意该函数一定要写在轮换插件前,因为我们必须在图片加载前生成缩略图。DrawImage()函数代码如下:

<script type="text/javascript" src="/scripts/jqthumb.js"></script>
<script>
function DrawImage(hotimg)
{
    $(hotimg).jqthumb({
    classname      : 'jqthumb',
            width          : '100%',//宽度
            height         : '300px',//高度
            position       : { y: '50%', x: '50%'},//从图片的中间开始产生缩略图
            zoom           : '1',//缩放比例
            method         : 'auto',//提交方法,用于不同的浏览器环境,默认为‘auto’
    });
}
</script>

在上述代码中,我们使用了jqthumb,并且传入了相关初始化参数。调用了该函数后,在图片加载的时候,就会按照上述参数产生图片的缩略图,从而解决图片变形问题。由于缩略图是从原始图片的正中间开始往两边取得,所以该缩略图包含了图片的主要内容。

记录,后续更新具体使用过程方法及实例

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值