基于JQuery图片超过指定高度自动缩小,点击恢复原图

很实用的一个功能,实现的功能就是指定一个高度,一旦图片高度超过这个高度,那图片就自动缩小到一定宽度(因为宽度好控制),高度设置为自动,这样图片就按比例缩放啦,然后点击缩小后的图片就恢复原图,再点击缩小,代码是站长自己写的,可能有点烂。但是对于小站够用了。

Jquery

第一种方法:

  1. <script type="text/javascript">  
  2. $(document).ready(function(){ 
  3. var yheight = 500;//高度条件 
  4. $(".panel img").each(function(){ 
  5.     var yheights=$(this).height(); 
  6.     var ywidth=$(this).width(); 
  7.    if(yheights > yheight) { 
  8.     $(this).width(150); 
  9.     $(this).css("height","auto"); 
  10.     var xheight=$(this).height(); 
  11.     $(this).mouseover(function(){ 
  12.      $(this).css("cursor","pointer"); 
  13.     }); 
  14.     $(this).click(function(){ 
  15.      if($(this).width()<ywidth){ 
  16.             $(this).height(yheights); 
  17.             $(this).width(ywidth); 
  18.          }else 
  19.          { 
  20.             $(this).width(150); 
  21.             $(this).height(xheight); 
  22.          } 
  23.     }); 
  24.    } 
  25. }); 
  26. }); 
  27. </script>  

第二种方法:

  1. jQuery(window).load(function () {   
  2.             jQuery(".panel img").each(function () {   
  3.                 DrawImage(this, 680, 1000);   
  4.             });   
  5.         });   
  6.         function DrawImage(ImgD, FitWidth, FitHeight) {   
  7.             var image = new Image();   
  8.             image.src = ImgD.src;   
  9.             if (image.width > 0 && image.height > 0) {   
  10.                 if (image.width / image.height >= FitWidth / FitHeight) {   
  11.                     if (image.width > FitWidth) {   
  12.                         ImgD.width = FitWidth;   
  13.                         ImgD.height = (image.height * FitWidth) / image.width;   
  14.                     } else {   
  15.                         ImgD.width = image.width;   
  16.                         ImgD.height = image.height;   
  17.                     }   
  18.                 } else {   
  19.                     if (image.height > FitHeight) {   
  20.                         ImgD.height = FitHeight;   
  21.                         ImgD.width = (image.width * FitHeight) / image.height;   
  22.                     } else {   
  23.                         ImgD.width = image.width;   
  24.                         ImgD.height = image.height;   
  25.                     }   
  26.                 }   
  27.             }   
  28.         }   

HTML

  1. <div class="panel">  
  2. <img src="http://img.daimajiayuan.com/uploads/allimg/1308/1-130R6163610.jpg" /> 
  3. </div>  

转载请注明:代码家园 » 基于JQuery图片超过指定高度自动缩小,点击恢复原图

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)