zoukankan      html  css  js  c++  java
  • jquery 等比例缩放图片插件

    最近给一个客户做一个小小的图片管理系统,图片不经过服务器,直接用的是地址。但是他要求图片不能变形扭曲。这样就要在客户端用JS做。好在有了jQuery,这个做起来还比较方便。自己写了个小小的插件www.2cto.com autosize.

    假设有这么个图片

    <img src=http://www.2cto.com/uploadfile/2011/0908/20110908053241941.jpg" width="200" height="300" />

    图片的尺寸被强制的设为了200*300,如果这个地址的图片比例不是2:3的话,这张图片就会变形。所以我想办法,让他占据的大小依然是200*300,而且让图片等比例放大到最大限度。于是有了下面插件。

    使用方法很简单。使用前必须在头部引入jquery库和我的image.js

    <script type="text/javascript" src="static/js/jquery-1.6.1.min.js"></script>

    <script type="text/javascript" src="static/js/image.js"></script>

    然后我们在图片上加点料

    <img src=http://www.2cto.com/uploadfile/2011/0908/20110908053241941.jpg" width="200" height="300" autosize='yes' pos='0' />

    这里的autosize=’yes’是默认的选择器,image.js已经绑定了在文档加载完毕的时候处理有这个标记的图片.

    pos=’0’表示长图片居中显示,这个值有三种选择,如果不指定这个值,则居中显示,也为0 .

    -1:居于顶部

    0:居于中间

    1:居于底部

    水平方向始终居中显示.

    其实这样就可以了,不用加任何其他的代码,我们上面的这张图片已经居中显示了。

    已等比例缩放

    我们也可以手动指定要处理的图片。

    $(“img”).autosize(‘#999’);

    这样就可以选择所有图片并处理它,那么这里有一个可选的参数,表示填充的背景色。如果不填写这个参数,默认填充为白色http://www.2cto.com/uploadfile/2011/0908/20110908053237294.rar

  • 相关阅读:
    2017北京网络赛 J Pangu and Stones 区间DP(石子归并)
    2017北京网络赛 F Secret Poems 蛇形回路输出
    2017 北京网络赛 E Cats and Fish
    CF 1198 A. MP3 模拟+滑动窗口
    博弈论
    gym 101911
    容器STL
    POJ 3281 Dining 最大流+拆点
    hdu 1533 Going Home 最小费用最大流 (模板题)
    C#博文搜集
  • 原文地址:https://www.cnblogs.com/yiwd/p/3126698.html
Copyright © 2011-2022 走看看