用jquery實現(xiàn)等比例縮放圖片效果插件
更新時間:2010年07月24日 00:04:31 作者:
用jquery實現(xiàn)圖片等比例縮放的代碼,以插件的形式編寫,需要的朋友可以參考下。
復制代碼 代碼如下:
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=\"加載中\(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實現(xiàn)一張圖片點擊鼠標放大再點縮小
- jquery實現(xiàn)頁面圖片等比例放大縮小功能
- 基于jquery的滾動鼠標放大縮小圖片效果
- jQuery實現(xiàn)滾動鼠標放大縮小圖片的方法(附demo源碼下載)
- jQuery實現(xiàn)的點擊圖片居中放大縮小功能示例
- 利用jQuery插件imgAreaSelect實現(xiàn)圖片上傳裁剪(放大縮?。?/a>
- jQuery實現(xiàn)等比例縮放大圖片讓大圖片自適應頁面布局
- jquery 圖片預加載 自動等比例縮放插件
- 基于JQuery實現(xiàn)的圖片自動進行縮放和裁剪處理
- jquery 圖片縮放拖動的簡單實例
- jQuery實現(xiàn)的圖片點擊放大縮小功能案例
相關文章
jQuery實現(xiàn)訂單提交頁發(fā)送短信功能前端處理方法
這篇文章主要介紹了jQuery實現(xiàn)訂單提交頁發(fā)送短信功能前端處理方法,涉及jQuery響應鼠標事件及針對頁面元素的樣式與字符串正則操作相關技巧,需要的朋友可以參考下2016-07-07Jquery實現(xiàn)仿新浪微博獲取文本框能輸入的字數代碼
Jquery實現(xiàn)仿新浪微博獲取文本框所能輸入的字數,感興趣的朋友可以研究一下代碼方便你折騰,希望本文提供的方法可以幫助到你2013-02-02jquery+ajax+C#實現(xiàn)無刷新操作數據庫數據的簡單實例
本篇文章主要是對jquery+ajax+C#實現(xiàn)無刷新操作數據庫數據的簡單實例進行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-02-02jquery如何實現(xiàn)在加載完iframe的內容后再進行操作
怎么實現(xiàn)在加載完iframe的內容后才進行下一步操作,通過jquery可以實現(xiàn),為iframe添加onload事件,具體如下,喜歡的朋友不妨參考下或許對大家有所幫助2013-09-09