用jquery實(shí)現(xiàn)等比例縮放圖片效果插件
更新時(shí)間:2010年07月24日 00:04:31 作者:
用jquery實(shí)現(xiàn)圖片等比例縮放的代碼,以插件的形式編寫(xiě),需要的朋友可以參考下。
復(fù)制代碼 代碼如下:
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;
//自動(dòng)縮放圖片
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下會(huì)自動(dòng)讀取緩存圖片
if (img.complete) {
//alert("getToCache!");
autoScaling();
return;
}
$(this).attr("src", "");
var loading = $("<img alt=\"加載中\(zhòng)" title=\"圖片加載中\(zhòng)" src=\"" + loadPic + "\" />");
t.hide();
t.after(loading);
$(img).load(function() {
autoScaling();
loading.remove();
t.attr("src", this.src);
t.show();
//alert("finally!")
});
});
}
您可能感興趣的文章:
- 基于jquery實(shí)現(xiàn)一張圖片點(diǎn)擊鼠標(biāo)放大再點(diǎn)縮小
- jquery實(shí)現(xiàn)頁(yè)面圖片等比例放大縮小功能
- 基于jquery的滾動(dòng)鼠標(biāo)放大縮小圖片效果
- jQuery實(shí)現(xiàn)滾動(dòng)鼠標(biāo)放大縮小圖片的方法(附demo源碼下載)
- jQuery實(shí)現(xiàn)的點(diǎn)擊圖片居中放大縮小功能示例
- 利用jQuery插件imgAreaSelect實(shí)現(xiàn)圖片上傳裁剪(放大縮?。?/a>
- jQuery實(shí)現(xiàn)等比例縮放大圖片讓大圖片自適應(yīng)頁(yè)面布局
- jquery 圖片預(yù)加載 自動(dòng)等比例縮放插件
- 基于JQuery實(shí)現(xiàn)的圖片自動(dòng)進(jìn)行縮放和裁剪處理
- jquery 圖片縮放拖動(dòng)的簡(jiǎn)單實(shí)例
- jQuery實(shí)現(xiàn)的圖片點(diǎn)擊放大縮小功能案例
相關(guān)文章
基于jquery鼠標(biāo)點(diǎn)擊其它地方隱藏層的實(shí)例代碼
基于jquery鼠標(biāo)點(diǎn)擊其它地方隱藏層的實(shí)例代碼,需要的朋友可以參考下。2011-01-01
jQuery控制cookie過(guò)期時(shí)間的方法
這篇文章主要介紹了jQuery控制cookie過(guò)期時(shí)間的方法,涉及jQuery操作cookie的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
jquery 插件之仿“卓越亞馬遜”首頁(yè)彈出菜單效果
用jquery實(shí)現(xiàn)的彈出菜單插件2008-12-12
jQuery實(shí)現(xiàn)一個(gè)簡(jiǎn)單的輪播圖
本文主要介紹了jQuery實(shí)現(xiàn)一個(gè)簡(jiǎn)單輪播圖的方法,具有很好的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-02-02
jquery實(shí)現(xiàn)動(dòng)態(tài)改變css樣式的方法分析
這篇文章主要介紹了jquery實(shí)現(xiàn)動(dòng)態(tài)改變css樣式的方法,結(jié)合實(shí)例形式分析了jQuery動(dòng)態(tài)操作css樣式的設(shè)置、獲取及應(yīng)用等相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
JQuery實(shí)現(xiàn)電梯導(dǎo)航效果
這篇文章主要為大家詳細(xì)介紹了JQuery實(shí)現(xiàn)電梯導(dǎo)航效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07

