用于修改图片大小并保持长宽比的jQuery插件(Tony原创)

        最近站长Tony开发了一个jquery.imgresize.js插件,这是一个用来修改图片大小并保持长宽比的jQuery插件,用于用户发布文章之后查看文章,如果用户的图片超过了我们容器的宽度不至于把样式搞乱,如果没有超过容器的宽度就保持原来的大小,兼容IE6、7、8浏览器。值得注意的是jquery版本要求是1.3到1.8,HTML声明请遵循W3C标准。

使用方法:

$('img').imgresize();
$('img').imgresize({width:600});

支持多张图片同时调整大小,例如选择器的元素有多张图片,让多张图片同时调整成等于或小于width的大小。没有填写width这个参数图片将保持原来的大小。

2013年9月25日优化了原来的代码,提高了插件的兼容性。

demo地址:http://www.tonitech.com/demo/jquery.imgresize.js

jquery.imgresize.js插件的代码如下:

// @charset "utf-8";
/**
 * jquery版本要求:1.3 ~ 1.8,HTML声明请遵循W3C标准
 * 用来修改图片大小并保持长宽比的jQuery插件
 * 兼容IE6浏览器
 * @author wangzhiangtony@qq.com
 * @version 1.2
 * @date 2013-9-25 14:46:49
 */
(function($) {
    $.fn.imgresize = function(opts) {
        var defaults = {
            width : null
        };
        var options = $.extend(defaults, opts);

		if(options.width != null) {
            if($.browser.msie) {
				$('img').each(function(index, element){
                    var src = $(element).attr('src');
                    $(element).load(function() {
                        iresize(this);
                    });
                    $(element).attr('src', src + '?' + new Date().getTime());
				});
            } else {
                $('img').load(function() {
                    iresize(this);
                });
            }
        }

        function iresize(self) {
            var width = $(self).width();
            var height = $(self).height();
            if(width > options.width) {
                height = options.width * height / width;
                $(self).css('width', options.width);
                $(self).css('height', Math.round(height));
            }
        }
    };
})(jQuery);

demo下载地址:

jquery.imgresize.js (524)

 

Tonitech版权所有 | 转载请注明出处: http://www.tonitech.com/1966.html

《用于修改图片大小并保持长宽比的jQuery插件(Tony原创)》有1个想法

发表评论