插件介绍

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

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

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

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

下载地址： http://pan.baidu.com/s/1jG5lT1W

简单使用

<!DOCTYPE html>
<html lang="en">
<body>
    <div style="width: 800px; height: 800px;">
        <img src="http://img1.ph.126.net/P-PDJa_xvMnLY-10Rr-tEw==/3084684269789354051.jpg" class="example1" />
    </div>
    <div style="width: 200px; height:500px;">
        <img src="http://img1.ph.126.net/P-PDJa_xvMnLY-10Rr-tEw==/3084684269789354051.jpg" class="example1" />
    </div>

<script src="jquery.js"></script>
    <script type="text/javascript" src="jqthumb.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('img').jqthumb({
                classname: 'jqthumb',
                width: '100%',
                height: '100%',
                position: {
                    x: '50%',
                    y: '50%'
                },
                source: 'src',
                show: false,
                responsive: 20,
                zoom: 1,
                method: 'auto',

after: function (imgObj) {
                    console.log(imgObj);
                },
                done: function (imgArray) {
                    for (i in imgArray) {
                        $(imgArray[i]).fadeIn();
                    }
                }
            });

});
    </script>
</body>

</html>

jqthumb.js缩略图插件-让缩略图正常显示而不变形的更多相关文章

  1. Bootstrap轮播（carousel）插件中图片变形的终极解决方案——使用jqthumb.js

    在顶求网的首页中我使用了BootStrap的轮播(carousel)插件来展示文章中的图片.我在程序中自动抓取文章的第一张图片作为该轮播控件中要显示的图片,由于文章的图片大小不一,而轮播插件的大小基本 ...

  2. 基于Jquery插件Uploadify实现实时显示进度条上传图片

    网址:http://www.jb51.net/article/83811.htm     这篇文章主要介绍了基于Jquery插件Uploadify实现实时显示进度条上传图片的相关资料,感兴趣的小伙伴们 ...

  3. ie6,7下js动态加载图片不显示错误

    ie6,7下js动态加载图片不显示错误 先描述一下出现这种匪夷所思bug的背景: 我在页面加载的时候加载一堆小缩略图,<a href="javascript:void(0);" ...

  4. knob.js进度插件

    关于knob.js进度插件的使用 关于这个插件,妹的,第一次使用坑死爹了,各种不会,幸亏我有持之以恒的精神,最终还是让其臣服于我的胯下.... 1.  引入 head  部分添加knob.js,同时引 ...

  5. Notyf - 超级简单、响应式的 JS 通知插件

    通知是网站的常用功能之一,可以用来显示消息.通告.提示等等.Notyf 是一款超级简单.响应式的 JS 通知插件,不依赖 jQuery 库,可以独立使用.赶紧试用一下吧! 在线演示      免费下载 ...

  6. 转: nginx使用image_filter生成缩略图 -- fasdfs海量图片缩略图整合

      转: nginx使用image_filter生成缩略图 -- fasdfs海量图片缩略图整合 http://blog.csdn.net/CleverCode/article/details/522 ...

  7. move.js运动插件

    move.js 运动插件是一款针对元素动画效果的插件.可以运用此插件制作出各类元素效果. 插件GitHub地址:https://github.com/visionmedia/move.js 下面整理学 ...

  8. Bootstrap的js分页插件属性介绍

    Bootstrap Paginator是一款基于Bootstrap的js分页插件,功能很丰富,个人觉得这款插件已经无可挑剔了.它提供了一系列的参数用来支持用户的定 制,提供了公共的方法可随时获得插件状 ...

  9. 一款基于Bootstrap的js分页插件bootstrap-paginator使用实例

    Bootstrap Paginator是一款基于Bootstrap的js分页插件,功能很丰富.它提供了一系列的参数用来支持用户的定制,提供了公共的方法可随时获得插件状态的改变,以及事件来监听用户的动作 ...

随机推荐

  1. Windows下彻底卸载删除SQL Serever2012

    在安装了SQL Server2012之后,当由于某些原因我们需要卸载它时,我们应该怎么操作呢?相信这个问题困扰着不少人,博主经过亲身实践之后,给大家提供这样一种方法. 第一步.在控制面板里面找到程序— ...

  2. RSA加密通信小结（四）--RSA加解密的实际操作与流程小结

    在上一篇文章中,我们已经将密钥的生成方法和流程,归纳总结.而本篇主要是讲如何利用密钥进行加解密. 首先,在上一篇文章中的我们生成了很多密钥,证书等等. 在上述生成的文件中,接收服务端加密报文:pkcs ...

  3. winform / Dev全局皮肤组件

    话不多说先上效果图. 由于这是单独的测试项目, 用于演示Dev控件的皮肤样式, 所以上面只是演示了部分控件的效果. 下面则是一些实际项目中的截图: Dev的控件样式不仅美观丰富, 上面仅皮肤设置就有4 ...

  4. react native－调用react－native－fs插件时，如果数据的接口是需要验证信息的，在android上运行报错

    调用react-native-fs插件时,如果数据的接口是需要验证信息的,在android上运行报错,而在iOS上运行没问题.原因是因为接口是有验证信息的,而调用这个插件时没有传入,在iOS上会自动加 ...

  5. printf和scanf整理（后续填补）

    scanf和printf头文件:<stdio.h> 1.%d.%3d.%03d.%-3d区分 %d:以十进制形式输出整数(int) %3d:指定宽度为3,不足的左边补空格 %03d:一种左 ...

  6. 安装旧版的docker-engine-1.12.6

    执行kubeadm init --api-advertise-addresses=172.16.160.211命令的时候,提示docker版本太新了 想要安装旧版docker,可以使用以下方法: yu ...

  7. Redis中的基本数据结构

    Redis基础数据结构 基础数据结构 sds简单动态字符串 数据结构 typedef struct sdstr{ int len // 字符串分配的字节 int free // 未使用的字节数 cha ...

  8. js返回顶部封装 简洁

    js返回顶部封装 简洁: 加入html页面body最后面即可. <script> a(); function a() { $(function() { if ($(".j-to- ...

  9. 【LeetCode】141. Linked List Cycle

    题目: Given a linked list, determine if it has a cycle in it. Follow up:Can you solve it without using ...

  10. selenium 环境搭建

    使用selenium + python来搭建环境的步骤: 1. 下载 python 的版本,常用到的有 2.7 和 3.6 2. 下载 selenium 的版本,通过命令进行下载. pip insta ...