插件介绍

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

方法一：用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. JavaScript中的string对象及方法

    string对象 string对象的两种创建 var a="hello"; var b=new String("hello"); //下面是方法 //charA ...

  2. javascript事件委托机制详解

    以个人前端工作面试经历来看,javascript事件委托是问的最多的一类题目之一,熟悉事件委托能够了解你对于javascript的掌握程度. 面试官可能问一下问题,现在有5个li待办事件,需要实现当点 ...

  3. Windows下安装Python扩展模块提示Unable to find vcvarsall.bat的问题

    本文内容 Unable to find vcvarsall.bat的问题描述 问题分析 总结 提示: 如果你只是想知道自己需要安装哪个版本的Visual Studio请直接查看本文最后一个小节的内容. ...

  4. C. Karen and Game

    C. Karen and Game time limit per test 2 seconds memory limit per test 512 megabytes input standard i ...

  5. Ubuntu16.04 + caffe-ssd + [CPU_ONLY] + KITTI 训练总结

    本次训练主要参考:http://blog.csdn.net/jesse_mx/article/details/65634482 感谢 Jesse_Mx ,帮助了我很多. 坑一[openCV未安装成功] ...

  6. 数独小算法，测试通过(Java)

    class SudokuMatrix { private int[][] matrix = new int[][] { {0, 5, 0, 6, 0, 1, 0, 0, 0}, {0, 0, 7, 0 ...

  7. unity3d项目导入android studio

    第一步 拿到unity3d项目,里面包含以下文件 第二步 在android studio下新建一个project 第三步 将unity3d项目目录下的libs下的jar文件复制黏贴到android s ...

  8. postcss使用

    准备 构建工具为Gulp基于PostCSSPostCSS插件 CSSNext 用下一代CSS书写方式兼容现在浏览器PostCSS插件 Autoprefixer 为CSS补全浏览器前缀PostCSS插件 ...

  9. VBS自动按键大全，vbs基本和特殊按键

    CreateObject("Wscript.Shell") SendKeys [String] 脚本实现自动按键盘的某个键 过程是:按下F5间隔50毫秒松开F5间隔3000毫秒按下 ...

  10. linux 常用 掌握要点

    1.查看正在执行的进程(Process) ps命令 Process Status 进程状态 语法: ps  [option]  [--help] -A  列出所有的行程 -w  显示加宽可以显示较多的 ...