這篇文章主要介紹了jquery實現根據瀏覽器窗口大小自動縮放圖片的方法,涉及jquery操作頁面元素屬性與樣式的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了jquery實現根據瀏覽器窗口大小自動縮放圖片的方法。分享給大家供大家參考。具體如下：

1. (function($){ 
2. $.fn.resizeimage = function(){ 
3. var imgLoad = function (url, callback) { 
4. var img = new Image(); 
5. img.src = url; 
6. if (img.complete) { 
7. callback(img.width, img.height); 
8. } else { 
9. img.onload = function () { 
10. callback(img.width, img.height); 
11. img.onload = null; 
12. }; 
13. }; 
14. }; 
15. var original = { 
16. width:$(window).width() 
17. }; 
18. return this.each(function(i,dom){ 
19. var image = $(this); 
20. imgLoad(image.attr('src'),function(){ 
21. var img = { 
22. width:image.width(), 
23. height:image.height() 
24. },percentage=1; 
25. if(img.width<original.width){ 
26. percentage = 1; 
27. }else{ 
28. percentage = (original.width)/img.width; 
29. } 
30. image.width(img.w=img.width*percentage-30).height(img.h=img.height*percentage); 
31. $(window).resize(function(){ 
32. var w = $(this).width(); 
33. percentage = w/img.width>1?1:w/img.width; 
34. var newWidth = img.width*percentage-30; 
35. var newHeight = img.height*percentage; 
36. image.width(newWidth).height(newHeight); 
37. }); 
38. }); 
39. }); 
40. }; 
41. })(jQuery); 

希望本文所述對大家的jquery程序設計有所幫助。