·您当前的位置:首页 > 技术教程 > JavaScript >

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

时间:2014-09-10 00:20酷播
[JS]js实现图片img宽度超出后自动缩小的源代码

[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>  

 

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器