热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

jquery实现根据浏览器窗口大小自动缩放图片的方法

这篇文章主要介绍了jquery实现根据浏览器窗口大小自动缩放图片的方法,涉及jquery操作页面元素属性与样式的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了jquery实现根据浏览器窗口大小自动缩放图片的方法。分享给大家供大家参考。具体如下:

(function($){
 $.fn.resizeimage = function(){
  var imgLoad = function (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);
     img.Onload= null;
    };
   };
  };
  var original = {
   width:$(window).width()
  };
  return this.each(function(i,dom){
   var image = $(this);
   imgLoad(image.attr('src'),function(){
    var img = {
     width:image.width(),
     height:image.height()
    },percentage=1;
    if(img.width1?1:w/img.width;
     var newWidth = img.width*percentage-30;
     var newHeight = img.height*percentage;
     image.width(newWidth).height(newHeight);
    });
   });
  });
 };
})(jQuery);

希望本文所述对大家的jquery程序设计有所帮助。


推荐阅读
author-avatar
J136271692
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有