• 技术文章 >web前端 >js教程

    基于jquery实现图片相关操作(重绘、获取尺寸、调整大小、缩放)_jquery

    2016-05-16 15:23:25原创794
    本文为大家分享了四个jquery图片常见操作,供大家参考,具体内容如下

    1、关于图片大小的重绘,你可以在服务端来实现,也可以通过JQuery在客户端实现。

    $(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获取图片实际尺寸的方法

    $(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;
     
     // 如果图片被缓存,则直接返回缓存数据
     if(img.complete){
       callback(img.width, img.height);
     }else{
          // 完全加载完毕的事件
       img.onload = function(){
     callback(img.width, img.height);
       }
        }
     
    }
    
    

    3、jquery 自动调整图片大小

    $(document).ready(function(){
            $('img').each(function() {  
            var maxWidth =500; // 图片最大宽度  
            var maxHeight =500;  // 图片最大高度  
            var ratio = 0; // 缩放比例 
             var width = $(this).width();  // 图片实际宽度  
             var height = $(this).height(); // 图片实际高度   // 检查图片是否超宽  
             if(width > maxWidth){    
             ratio = maxWidth / width;  // 计算缩放比例    
             $(this).css("width", maxWidth); // 设定实际显示宽度    
             height = height * ratio;  // 计算等比例缩放后的高度    
             $(this).css("height", height); // 设定等比例缩放后的高度  
             }   // 检查图片是否超高 
              if(height > maxHeight){    
              ratio = maxHeight / height; // 计算缩放比例   
              $(this).css("height", maxHeight);  // 设定实际显示高度    
              width = width * ratio;  // 计算等比例缩放后的高度    
              $(this).css("width", width);  // 设定等比例缩放后的高度  
              }});
          });
    

    4、使用jQuery对图片进行大小缩放

    $(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
    });
    

    以上就是本文的全部内容,帮助大家实现图片重绘、图片获取尺寸、图片调整大小以及图片缩放,希望大家喜欢。

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    上一篇:jquery实现图片预加载_jquery 下一篇:不得不分享的JavaScript常用方法函数集(下)_javascript技巧
    大前端线上培训班

    相关文章推荐

    • innerhtml是jquery方法么• javascript怎么设置标签的背景颜色• jquery select 不可编辑怎么办• javascript 怎么将时间转毫秒• 浅谈怎么利用node提升工作效率

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网