优源码

 找回密码
 注册会员

QQ登录

只需一步,快速开始

搜索
优源码 首页 博客 查看内容

jQuery插件之图片自适应

2015-7-2 10:24| 发布者: discuzadmin| 查看: 1837| 评论: 0|原作者: dogzhang|来自: dogzhang的CSDN博客

效果图如下:

功能:使图片自适应居中位于容器内

限制:容器需要给定大小


使用方法:

1、引入jQuery,然后引入fitimg插件

2、给需要图片自适应的容器固定宽高

[html] view plaincopy
  1. 3、header .account .img { width: 40px; height: 40px; margin: 5px 5px; float: left; }  

4、添加data-src属性

[html] view plaincopy
  1. <div class="img" data-src ="/Images/avatar.jpg">div>  
这里并没有写img标签,插件会自动生成img,把容器当成你想要呈现的图片就可以了

5、调用

[html] view plaincopy
  1. $(".img").fitimg('/Images/捕获.png')  
括号内为如果data-src指向的图片加载失败的替补图片,如果该图片也加载失败,则该容器会清空容器内所有内容

源代码:

[javascript] view plaincopy
  1. (function ($)  
  2. {  
  3.     $.fn.extend({  
  4.         fitimg: function (errorimg)  
  5.         {  
  6.             $(this).each(function ()  
  7.             {  
  8.                 if ($(this).data('src'))  
  9.                 {  
  10.                     $(this).empty()  
  11.                     var img = document.createElement('img')  
  12.                     $(this).append($(img))  
  13.                     $(img).load(function ()  
  14.                     {  
  15.                         var parent = $(this).parent()  
  16.                         var pWidth = parent.width()  
  17.                         var pHeight = parent.height()  
  18.                         var oWidth = $(this).width()  
  19.                         var oHeight = $(this).height()  
  20.                         if (oWidth / pWidth > oHeight / pHeight)  
  21.                         {  
  22.                             $(this).height(pHeight)  
  23.                             var nWidth = pHeight * oWidth / oHeight  
  24.                             $(this).width(nWidth)  
  25.                             $(this).css('margin-left', -(nWidth - pWidth) / 2)  
  26.                         }  
  27.                         else  
  28.                         {  
  29.                             $(this).width(pWidth)  
  30.                             var nHeight = pWidth * oHeight / oWidth  
  31.                             $(this).height(nHeight)  
  32.                             $(this).css('margin-top', -(nHeight - pHeight) / 2)  
  33.                         }  
  34.                         parent.css('overflow''hidden')  
  35.                     }).error(function ()  
  36.                     {  
  37.                         if (errorimg)  
  38.                         {  
  39.                             $(this).parent().data('src', errorimg).fitimg()  
  40.                         }  
  41.                         else  
  42.                         {  
  43.                             $(this).parent().empty()  
  44.                         }  
  45.                     })  
  46.                     $(img).attr('src', $(this).data('src'))  
  47.                 }  
  48.             })  
  49.             return $(this)  
  50.         }  
  51.     })  
  52. })(jQuery)  

免责声明|优源码 | |

GMT+8, 2017-1-20 11:49

本站所有资源来自互联网或网友分享,仅可用于学习,不可商用,否则后果自负。

© 2012-2015 uyuanma.com

返回顶部