本文為大家分享了四個(gè)jquery圖片常見(jiàn)操作，供大家參考，具體內(nèi)容如下
1、關(guān)于圖片大小的重繪，你可以在服務(wù)端來(lái)實(shí)現(xiàn)，也可以通過(guò)JQuery在客戶端實(shí)現(xiàn)。
$(window).bind("load", function() { // IMAGE RESIZE $('#product_cat_list img').each(function() { var maxWidth = 120; var maxHeight = 120; var ratio = 0; var width = $(this).width(); var height = $(this).height(); if(width > maxWidth){ ratio = maxWidth / width; $(this).css("width", maxWidth); $(this).css("height", height * ratio); height = height * ratio; } var width = $(this).width(); var height = $(this).height(); if(height > maxHeight){ ratio = maxHeight / height; $(this).css("height", maxHeight); $(this).css("width", width * ratio); width = width * ratio; } }); //$("#contentpage img").show(); // IMAGE RESIZE}); 2、jQuery獲取<img>圖片實(shí)際尺寸的方法
$(function(){ var imgSrc = $("#image").attr("src"); getImageWidth(imgSrc,function(w,h){ console.log({width:w,height:h}); });});function getImageWidth(url,callback){ var img = new Image(); img.src = url; // 如果圖片被緩存，則直接返回緩存數(shù)據(jù) if(img.complete){ callback(img.width, img.height); }else{ // 完全加載完畢的事件 img.onload = function(){ callback(img.width, img.height); } } } 3、jquery 自動(dòng)調(diào)整圖片大小
$(document).ready(function(){ $('img').each(function() { var maxWidth =500; // 圖片最大寬度 var maxHeight =500; // 圖片最大高度 var ratio = 0; // 縮放比例 var width = $(this).width(); // 圖片實(shí)際寬度 var height = $(this).height(); // 圖片實(shí)際高度 // 檢查圖片是否超寬 if(width > maxWidth){ ratio = maxWidth / width; // 計(jì)算縮放比例 $(this).css("width", maxWidth); // 設(shè)定實(shí)際顯示寬度 height = height * ratio; // 計(jì)算等比例縮放后的高度 $(this).css("height", height); // 設(shè)定等比例縮放后的高度 } // 檢查圖片是否超高 if(height > maxHeight){ ratio = maxHeight / height; // 計(jì)算縮放比例 $(this).css("height", maxHeight); // 設(shè)定實(shí)際顯示高度 width = width * ratio; // 計(jì)算等比例縮放后的高度 $(this).css("width", width); // 設(shè)定等比例縮放后的高度 }}); }); 4、使用jQuery對(duì)圖片進(jìn)行大小縮放
$(window).bind("load", function() { // IMAGE RESIZE $('#product_cat_list img').each(function() { var maxWidth = 120; var maxHeight = 120; var ratio = 0; var width = $(this).width(); var height = $(this).height(); if(width > maxWidth){ ratio = maxWidth / width; $(this).css("width", maxWidth); $(this).css("height", height * ratio); height = height * ratio; } var width = $(this).width(); var height = $(this).height(); if(height > maxHeight){ ratio = maxHeight / height; $(this).css("height", maxHeight); $(this).css("width", width * ratio); width = width * ratio; } }); //$("#contentpage img").show(); // IMAGE RESIZE}); 以上就是本文的全部?jī)?nèi)容，幫助大家實(shí)現(xiàn)圖片重繪、圖片獲取尺寸、圖片調(diào)整大小以及圖片縮放，希望大家喜歡。
