原创jQuery插件之图片自适应

页面导航:首页 > 网络编程 > JavaScript > 原创jQuery插件之图片自适应

原创jQuery插件之图片自适应

来源: 作者: 时间:2016-01-23 10:23 【

效果图如下:功能:使图片自适应居中位于容器内限制:容器需要给定大小使用方法:1、引入jQuery,然后引入fitimg插件2、给需要图片自适应的容器固定宽高3、header account img { width: 40p

效果图如下:

\

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

限制:容器需要给定大小

使用方法:

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

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

 

3、header .account .img { width: 40px; height: 40px; margin: 5px 5px; float: left; }

 

4、添加data-src属性

 


 
这里并没有写img标签,插件会自动生成img,把容器当成你想要呈现的图片就可以了

 

5、调用

 

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

 

源代码:

 

(function ($)
{
    $.fn.extend({
        fitimg: function (errorimg)
        {
            $(this).each(function ()
            {
                if ($(this).data('src'))
                {
                    $(this).empty()
                    var img = document.createElement('img')
                    $(this).append($(img))
                    $(img).load(function ()
                    {
                        var parent = $(this).parent()
                        var pWidth = parent.width()
                        var pHeight = parent.height()
                        var oWidth = $(this).width()
                        var oHeight = $(this).height()
                        if (oWidth / pWidth > oHeight / pHeight)
                        {
                            $(this).height(pHeight)
                            var nWidth = pHeight * oWidth / oHeight
                            $(this).width(nWidth)
                            $(this).css('margin-left', -(nWidth - pWidth) / 2)
                        }
                        else
                        {
                            $(this).width(pWidth)
                            var nHeight = pWidth * oHeight / oWidth
                            $(this).height(nHeight)
                            $(this).css('margin-top', -(nHeight - pHeight) / 2)
                        }
                        parent.css('overflow', 'hidden')
                    }).error(function ()
                    {
                        if (errorimg)
                        {
                            $(this).parent().data('src', errorimg).fitimg()
                        }
                        else
                        {
                            $(this).parent().empty()
                        }
                    })
                    $(img).attr('src', $(this).data('src'))
                }
            })
            return $(this)
        }
    })
})(jQuery)


 

 

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<