当前位置:七道奇文章资讯网站建设网站编程
日期:2011-08-20 16:52:00  来源:本站整理

jquery 等比例缩放图片插件[网站编程]

赞助商链接



  本文“jquery 等比例缩放图片插件[网站编程]”是由七道奇为您精心收集,来源于网络转载,文章版权归文章作者所有,本站不对其观点以及内容做任何评价,请读者自行判断,以下是其具体内容:

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

假定有这么个图片

<img src="http://img13.nipic.com/20100224/4070682_214501000891_1.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://img13.nipic.com/20100224/4070682_214501000891_1.jpg" width="200" height="300" autosize='yes' pos='0' />

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

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

-1:居于顶部

0:居于中间

1:居于底部

水平方向始终居中显示.

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

已等比例缩放

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

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

这样便可以挑选全部图片并处理它,那么这里有一个可选的参数,表示填充的后台色.假如不填写这个参数,默许填充为白色.


  以上是“jquery 等比例缩放图片插件[网站编程]”的内容,如果你对以上该文章内容感兴趣,你可以看看七道奇为您推荐以下文章:
  • <b>基于jQuery实现的类flash菜单效果</b>
  • jquery 等比例缩放图片插件
  • jquery操作和获得iframe中的对象
  • <b>Struts 2.1.6精简实例系列教程(5):用户注册模块(整合Jquery)</b>
  • Struts 2.1.6精简实例系列教程(6):重写用户登录模块(整合Jquer
  • Windows Azure云中托管jQuery利用实例
  • asp.net WebService jquery拜候实例
  • <b>php中jquery实现无革新提交</b>
  • 操纵jQuery实现页面渐显效果
  • 本文地址: 与您的QQ/BBS好友分享!
    • 好的评价 如果您觉得此文章好,就请您
        0%(0)
    • 差的评价 如果您觉得此文章差,就请您
        0%(0)

    文章评论评论内容只代表网友观点,与本站立场无关!

       评论摘要(共 0 条,得分 0 分,平均 0 分) 查看完整评论
    Copyright © 2020-2022 www.xiamiku.com. All Rights Reserved .