宜昌本地软件开发与弱电工程服务商
项目咨询 · 快速响应
您当前的位置: > 个人博客 > javascript

[JS]js实现图片img宽度超出后自动缩小的源代码

2016-10-13 00:16:48 点击量:68 标签: 收藏本文

[JS]js实现图片img宽度超出后自动缩小的源代码

  1. <script type="text/javascript" src="js/jquery.min.js"></script> 
  2. <script type="text/javascript"> 
  3. jQuery.fn.LoadImage=function(scaling,width,height,loadpic){ 
  4. if(loadpic==null)loadpic="../img/loading.gif"
  5. return this.each(function(){ 
  6. var t=$(this); 
  7. var src=$(this).attr("src") 
  8. var img=new Image(); 
  9. img.src=src; 
  10. //酷播cuplayer.com自动缩放图片 
  11. var autoScaling=function(){ 
  12. if(scaling){ 
  13. if(img.width>0 && img.height>0){ 
  14. if(img.width/img.height>=width/height){ 
  15. if(img.width>width){ 
  16. t.width(width); 
  17. t.height((img.height*width)/img.width); 
  18. }else{ 
  19. t.width(img.width); 
  20. t.height(img.height); 
  21. else{ 
  22. if(img.height>height){ 
  23. t.height(height); 
  24. t.width((img.width*height)/img.height); 
  25. }else{ 
  26. t.width(img.width); 
  27. t.height(img.height); 
  28. //酷播cuplayer.com处理ff下会自动读取缓存图片 
  29. if(img.complete){ 
  30. autoScaling(); 
  31. return; 
  32. $(this).attr("src",""); 
  33. var loading=$("<img alt=\"酷播cuplayer.com加载中...\" title=\"图片加载中...\" src=\""+loadpic+"\" />"); 
  34. t.hide(); 
  35. t.after(loading); 
  36. $(img).load(function(){ 
  37. autoScaling(); 
  38. loading.remove(); 
  39. t.attr("src",this.src); 
  40. t.show(); 
  41. }); 
  42. } ); 
  43. </script> 
  44. <div id="content"><img src="img/20120518073933709.jpg"/></div> 
  45. <script type="text/javascript"> 
  46. <!-- 
  47. $(window).load(function(){ 
  48. $('#content img').LoadImage(true, 600,500,'img/loading.gif'); 
  49. }); 
  50. //--> 
  51. </script>  

 

ABOUT US
宜昌农人网络科技有限公司

我们是一家提供综合软件外包与弱电工程服务的技术公司。

业务涵盖定制软件、管理系统、网站、小程序、APP、系统集成、网络布线、监控安防、门禁、机房建设及长期技术维护。

公司地址:湖北省宜昌市伍家岗区东站二路6号三峡(宜昌)大数据产业园海洋馆二楼A203室