jquery 等比例缩放图片插件

来源:网络 责任编辑:栏目编辑 发表时间:2013-07-01 04:00 点击:

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

假设有这么个图片

<img src=/uploads/allimg/201112/20111225115015922.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=/uploads/allimg/201112/20111225115015922.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
 

    相关新闻>>

      发表评论
      请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
      用户名: 验证码:点击我更换图片
      最新评论 更多>>

      推荐热点

      • Gb2312转utf-8编码的方法(vbs+js)
      • 如何使用Ajax技术开发Web应用程序(1)
      • js跳转路径问题
      • JavaScript模仿桌面窗口
      • 用js检测两个线段是否相交
      • 运用JavaScript构建你的第一个Metro式应用程序(on Windows
      • 我知道的JavaScript -- 设计模式(桥接)应用之 – 验证器
      • 我是如何去了解jquery的(六),案例之幻灯片轮换
      • Jquery封装幻灯片效果
      网站首页 - 友情链接 - 网站地图 - TAG标签 - RSS订阅 - 内容搜索
      Copyright © 2008-2015 计算机技术学习交流网. 版权所有

      豫ICP备11007008号-1