用jquery实现等比例缩放图片效果插件

复制代码代码如下: jQuery.fn.autoZoomLoadImage = function(scaling, width, height, loadPic) { if (loadPic == null) loadPic = "Loading.gif"; return this.each(function() { var t = $(this); var src = $(this).attr("src"); var img = new Image(); //alert("Loading") img.src = src; //自动缩放图片 var autoScaling = function() { if (scaling) { if (img.width > 0 && img.height > 0) { if (img.width / img.height >= width / height) { if (img.width > width) { t.width(width); t.height((img.height * width) / img.width); } else { t.width(img.width); t.height(img.height); } } else { if (img.height > height) { t.height(height); t.width((img.width * height) / img.height); } else { t.width(img.width); t.height(img.height); } } } } } //处理ff下会自动读取缓存图片 if (img.complete) { //alert("getToCache!"); autoScaling(); return; } $(this).attr("src", ""); var loading = $("<img alt="加载中" title="图片加载中" src="" + loadPic + "" />"); t.hide(); t.after(loading); $(img).load(function() { autoScaling(); loading.remove(); t.attr("src", this.src); t.show(); //alert("finally!") }); }); }

　　推荐阅读

　　JS遮罩层效果兼容ie firefox jQuery遮罩层

复制代码代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta h>>>详细阅读

本文标题：用jquery实现等比例缩放图片效果插件

地址：http://www.17bianji.com/kaifa2/JS/25958.html

1/2 1