插件介绍

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

方法一：用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. CVE-2017-8464远程命令执行漏洞（震网漏洞）复现

    前言 2017年6月13日,微软官方发布编号为CVE-2017-8464的漏洞公告,官方介绍Windows系统在解析快捷方式时存在远程执行任意代码的高危漏洞,黑客可以通过U盘.网络共享等途径触发漏洞, ...

  2. Navicat连接Oracle报错_Cannot load OCI DLL 87

    原因: Oracle需要装client才能让第三方工具通过OCI(Oracle Call Interface)来连接. 解决方案: 1. 去oracle官网下载Instant Client 11, 或 ...

  3. Cordova各个插件使用介绍系列（五）—$cordovaGeolocation获取当前位置

    详情请看:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/cordova-5-cordovageolocation/ $cordov ...

  4. Jenkin-持续集成

    1.Jenkins安装 本文将会介绍如何在windows 中安装Jenkins,并且使用Jenkins进行项目的构建. 首先我们进入到Jenkins 的官网下载地址:https://jenkins.i ...

  5. phpcmsV9手机站内容页有时内容不显示

    phpcmsV9手机站内容页有时内容不显示,修改的办法是: 在文件phpcms\modules\wap\index.php 中 屏蔽第119行,即如下内容 //$content = $contentp ...

  6. EF架构~codeFirst从初始化到数据库迁移

    一些介绍 CodeFirst是EntityFrameworks的一种开发模式,即代码优先,它以业务代码为主,通过代码来生成数据库,并且加上migration的强大数据表比对功能来生成数据库版本,让程序 ...

  7. Kubernetes部分Volume类型介绍及yaml示例

    1.EmptyDir(本地数据卷) EmptyDir类型的volume创建于pod被调度到某个宿主机上的时候,而同一个pod内的容器都能读写EmptyDir中的同一个文件.一旦这个pod离开了这个宿主 ...

  8. Dockerfile命令详解（超全版本）

    制作Dockerfile为Docker入门学习的第一步(当然,除了环境搭建). 本文收集.整理了官网关于制作Dockerfile的全部命令(除SHELL没整理,这个就不弄了),可帮助大家快速进入Doc ...

  9. mysql in 和 not in 语句用法

    1.mysql in语句 select * from tb_name where id in (10,12,15,16);2.mysql not in 语句 select * from tb_name ...

  10. 【Android Developers Training】 9. 覆盖于布局之上的Action Bar

    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...