原创jQuery插件之图片自适应

Posted wzjhoutai

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了原创jQuery插件之图片自适应相关的知识,希望对你有一定的参考价值。

效果图例如以下:

技术分享

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

限制:容器须要给定大小

用法:

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

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

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

4、加入data-src属性

<div class="img" data-src ="/Images/avatar.jpg"></div>
这里并没有写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)

近期(20150831)又加了两个新的功能

1、等图片载入完毕才显示出来,以免因网络问题导致图片刚開始非常大,然后再由js缩放到恰当大小。这个过程不应让用户看见,所以做了一点小小的处理

2、加入图片自适应选项。曾经仅仅同意拉伸到和容器一样大,如今添加可选參数能够缩小到被容器包裹

新增的參数名叫iszoomin,默觉得放大,也就是说假设不传这个值表示进行放大操作

两种效果对照图例如以下

技术分享

下面为插件最新的代码

(function ($)
{
    $.fn.extend({
        fitimg: function (errorimg, iszoomin)
        {
            $(this).each(function ()
            {
                $(this).empty()
                var img = document.createElement(‘img‘)
                $(this).append($(img))
                img.style.display = ‘none‘
                $(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)
                    {
                        if (!iszoomin)
                        {
                            $(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‘, (pHeight - nHeight) / 2)
                        }
                    }
                    else
                    {
                        if (!iszoomin)
                        {
                            $(this).width(pWidth)
                            var nHeight = pWidth * oHeight / oWidth
                            $(this).height(nHeight)
                            $(this).css(‘margin-top‘, -(nHeight - pHeight) / 2)
                        }
                        else
                        {
                            $(this).height(pHeight)
                            var nWidth = pHeight * oWidth / oHeight
                            $(this).width(nWidth)
                            $(this).css(‘margin-left‘, (pWidth - nWidth) / 2)
                        }
                    }
                    parent.css(‘overflow‘, ‘hidden‘)
                    img.style.display = ‘‘
                }).error(function ()
                {
                    if (errorimg)
                    {
                        $(this).parent().data(‘src‘, errorimg).fitimg(null, iszoomin)
                    }
                    else
                    {
                        $(this).parent().empty()
                    }
                })
                $(img).attr(‘src‘, $(this).data(‘src‘))
            })
            return $(this)
        }
    })
})(jQuery)

2016/12/11更新

jQuery3.1已经公布,为了适配jQuery3.1,代码改动例如以下


(function ($) {
    $.fn.extend({
        fitimg: function (errorimg, iszoomin) {
            iszoomin = typeof iszoomin === ‘undefined‘ ? false : iszoomin
            $(this).each(function () {
                $(this).empty()
                var img = document.createElement(‘img‘)
                $(this).append($(img))
                img.style.display = ‘none‘
                $(img).on(‘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) {
                        if (!iszoomin) {
                            $(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‘, (pHeight - nHeight) / 2)
                        }
                    }
                    else {
                        if (!iszoomin) {
                            $(this).width(pWidth)
                            var nHeight = pWidth * oHeight / oWidth
                            $(this).height(nHeight)
                            $(this).css(‘margin-top‘, -(nHeight - pHeight) / 2)
                        }
                        else {
                            $(this).height(pHeight)
                            var nWidth = pHeight * oWidth / oHeight
                            $(this).width(nWidth)
                            $(this).css(‘margin-left‘, (pWidth - nWidth) / 2)
                        }
                    }
                    parent.css(‘overflow‘, ‘hidden‘)
                    img.style.display = ‘‘
                }).on(‘error‘, function () {
                    if (errorimg) {
                        $(this).parent().data(‘src‘, errorimg).fitimg(null, iszoomin)
                    }
                    else {
                        $(this).parent().empty()
                    }
                })
                $(img).attr(‘src‘, $(this).data(‘src‘))
            })
            return $(this)
        }
    })
})(jQuery)











以上是关于原创jQuery插件之图片自适应的主要内容,如果未能解决你的问题,请参考以下文章

jQuery自适应倒计时插件

如何用CSS使图片自适应显示宽度

关于photoswiper展示时图片自适应的问题

关于photoswipe的展示时图片自适应问题

jquery-leonaScroll-1.3-自定义竖向自适应滚动条插件

jquery 如何让图片自适应大小