用jquery實(shí)現(xiàn)等比例縮放圖片效果插件
更新時(shí)間:2010年07月24日 00:04:31 作者:
用jquery實(shí)現(xiàn)圖片等比例縮放的代碼,以插件的形式編寫,需要的朋友可以參考下。
復(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實(shí)現(xiàn)訂單提交頁(yè)發(fā)送短信功能前端處理方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)訂單提交頁(yè)發(fā)送短信功能前端處理方法,涉及jQuery響應(yīng)鼠標(biāo)事件及針對(duì)頁(yè)面元素的樣式與字符串正則操作相關(guān)技巧,需要的朋友可以參考下2016-07-07Jquery實(shí)現(xiàn)仿新浪微博獲取文本框能輸入的字?jǐn)?shù)代碼
Jquery實(shí)現(xiàn)仿新浪微博獲取文本框所能輸入的字?jǐn)?shù),感興趣的朋友可以研究一下代碼方便你折騰,希望本文提供的方法可以幫助到你2013-02-02jquery+ajax+C#實(shí)現(xiàn)無(wú)刷新操作數(shù)據(jù)庫(kù)數(shù)據(jù)的簡(jiǎn)單實(shí)例
本篇文章主要是對(duì)jquery+ajax+C#實(shí)現(xiàn)無(wú)刷新操作數(shù)據(jù)庫(kù)數(shù)據(jù)的簡(jiǎn)單實(shí)例進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-02-02jquery如何實(shí)現(xiàn)在加載完iframe的內(nèi)容后再進(jìn)行操作
怎么實(shí)現(xiàn)在加載完iframe的內(nèi)容后才進(jìn)行下一步操作,通過(guò)jquery可以實(shí)現(xiàn),為iframe添加onload事件,具體如下,喜歡的朋友不妨參考下或許對(duì)大家有所幫助2013-09-09JQuery異步post上傳表單數(shù)據(jù)標(biāo)準(zhǔn)化模板
這篇文章主要介紹了JQuery異步post上傳表單數(shù)據(jù)標(biāo)準(zhǔn)化模板,主要分享詳細(xì)的代碼,具有一的的知識(shí)參考性,需要的小伙伴可以參考一下2022-02-02jquery動(dòng)態(tài)改變form屬性提交表單
在js中動(dòng)態(tài)改變form的屬性,滿足不同條件的form提交需求,下面有個(gè)不錯(cuò)的示例,大家可以參考下2014-06-06