zoukankan      html  css  js  c++  java
  • jQuery 插件 居中容器内的图片

    最近突然来了兴趣,把很久前写的Ajax请求状态管理器重构了下,随后写了篇介绍小文与大家分享了。然后,又把我的博客改版了下,有时候发现之前喜欢的样式,慢慢会看厌了,就花了时间改观改观吧。

    今天我想介绍一个大家在平日里会经常遇到的一个问题--图片在容器中的居中。图片在容器中水平及垂直居中其实很简单,甚至可以只通过CSS就能搞定。例如用display: table;,然后在图片外加个容器,定义display: table-cell; vertical-align: middle; text-align: center;,如果再需要限制图片的大小以防超出到容器之外,只要定义上max-width和max-height,是不是很简单!如果用javascript解决这个问题更简单了,只要计算下位置就OK了,相关计算方式你google下到处都是。

    但是,有一个问题,上面的CSS定义在有些浏览器中很难实现,比如IE。所以你必须借助javascript实现。如果经常要用到,不如写个插件来的方便。这个插件中要理解一点是,图片加载完成的load事件和图片地址src赋值的顺序。在有的浏览器中图片src必须写在load事件之后,否则不会触发load事件,下面来详细介绍下我写的插件。

    使用方式如普通jQuery插件一样:

    $( selector ).center( arguments );

    有3个参数可定义:
    • src:string,图片地址;
    • maxWidth:number,图片最大宽度;
    • maxHeight:number,图片最大高度。

    该插件对动态地址的图片显示还是蛮灵活的,特别是图库显示。当然你可以进一步扩展她。

    Demo打包下载:jQuery居中图片插件

  • 相关阅读:
    如何将一个类改造为线程安全
    50行代码实现缓存,JAVA内存模型原理
    Qt 解压/压缩文件
    QT学习笔记—1
    在http编程的门口飞牛网自动下单,查单
    QList 排序
    Qt 打开指定的文件
    spoj 375 query on a tree 题解
    uva 11388 GCD LCM题解
    uva 1476 Error Curves 题解
  • 原文地址:https://www.cnblogs.com/nicolaszhao/p/2473564.html
Copyright © 2011-2022 走看看