当前位置:96看吧 > 实用代码 > 网页特效 > jQuery特效实现等比例缩放图片

jQuery特效实现等比例缩放图片

时间:2013/08/21
作者:MaWendong.CN
来源:96看吧
查看:

jQuery实现图片等比例缩放

本文将为您讲述使用jQuery特效实现等比例缩放图片,让大图片自适应页面布局。在布局页面时,有时会遇到大图片将页面容器“撑破”的情况,尤其是加载外链图片。

通常我们处理缩略图是使用后台代码(PHP、.net、Java等)根据大图片生成一定尺寸的缩略图,来供前台页面调用,当然也有使用前台javascript脚本将加载后的大图强行缩放,变成所谓的缩略图,这种方法不可取。但是,针对网站内容页,如本站文章详情页,如果需要加载一张很大的图片时,为了防止“撑破”布局,我们使用jQuery来等比例缩放图片。

分两种情况:

已知图片尺寸

  1. <div id="demo1">   
  2.     <img src="a.jpg" width="800" height="300" alt="">   
  3. </div>  

当页面加载的图片<img>中含有属性width和height值,则可以使用几句简单的jQuery代码实现等比例缩放。

  1. $(function(){   
  2.     var w = $("#demo1").width();//容器宽度   
  3.     $("#demo1 img").each(function(){//如果有很多图片,我们可以使用each()遍历   
  4.         var img_w = $(this).width();//图片宽度   
  5.         var img_h = $(this).height();//图片高度   
  6.         if(img_w>w){//如果图片宽度超出容器宽度--要撑破了   
  7.             var height = (w*img_h)/img_w; //高度等比缩放   
  8.             $(this).css({"width":w,"height":height});//设置缩放后的宽度和高度   
  9.         }   
  10.     });   
  11. }); 

未知图片尺寸

当页面加载的图片尺寸未知的情况下,上述代码则不能进行有效的缩放,这种情况多出现在采集的外部链接图片。

  1. <div id="demo2">   
  2.     <img src="b.jpg" alt="">   
  3. </div>  

调用代码:

  1. $(function(){   
  2.     $("#demo2").autoIMG();   
  3. });  

autoIMG可以快速对文章图片进行尺寸自适应,它利用浏览器获取图片文件头尺寸数据,无需等待图片加载完成。autoIMG兼容各种主流浏览器。

上一篇:jQuery网页特效通用的iframe弹窗插件
下一篇:jQuery特效记录倒计时
演示地址
Demo
下载地址
Down
页面举报
Report
关闭页面
Close
收藏页面
Favorites
分享页面
Share
版权信息:栏目内,站内会员所分享的全部“资源/素材/文章”,仅供学习与参考,版权为原作者所有。
下载提示:非注册用户每天可下载一个文件,已注册会员不受限制。
网友评论
数据载入中
验证码
  • 请您注意:
  • ·请不要在评论中含与内容无关的广告链接。
  • ·不良评论请用报告管理员,以利管理员及时删除。
  • ·遵守中华人民共和国的各项有关法律法规
  • ·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
  • ·本站管理人员有权保留或删除评论中的任意内容
  • ·您在本站发表的作品,本站有权在网站内转载或引用
  • ·参与本评论即表明您已经阅读并接受上述条款
相关最新
相关热门