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


Posted in Javascript onJuly 17, 2015

本文实例讲述了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.width<original.width){
     percentage = 1;
    }else{
     percentage = (original.width)/img.width;
    }
    image.width(img.w=img.width*percentage-30).height(img.h=img.height*percentage);
    $(window).resize(function(){
     var w = $(this).width();
     percentage = w/img.width>1?1:w/img.width;
     var newWidth = img.width*percentage-30;
     var newHeight = img.height*percentage;
     image.width(newWidth).height(newHeight);
    });
   });
  });
 };
})(jQuery);

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

Javascript 相关文章推荐
Jquery post传递数组方法实现思路及代码
Apr 28 Javascript
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
Aug 08 Javascript
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
Nov 18 Javascript
第一次接触神奇的Bootstrap网格系统
Jul 27 Javascript
JS获取当前页面名称的简单实例
Aug 19 Javascript
纯js实现悬浮按钮组件
Dec 17 Javascript
JS异步文件分片断点上传的实现思路
Dec 25 Javascript
Java与JavaScript中判断两字符串是否相等的区别
Mar 13 Javascript
原生js简单实现放大镜特效
May 16 Javascript
jQuery实现滚动效果
Nov 17 jQuery
JS数组方法concat()用法实例分析
Jan 18 Javascript
jQuery实现移动端扭蛋机抽奖
Nov 08 jQuery
JavaScript调用浏览器打印功能实例分析
Jul 17 #Javascript
JS判断页面是否出现滚动条的方法
Jul 17 #Javascript
javascript图片预加载实例分析
Jul 16 #Javascript
javascript的BOM汇总
Jul 16 #Javascript
.NET微信公众号开发之创建自定义菜单
Jul 16 #Javascript
初识Javascript小结
Jul 16 #Javascript
浅谈javascript中的DOM方法
Jul 16 #Javascript
You might like
Linux下实现PHP多进程的方法分享
2012/08/16 PHP
探讨各种PHP字符串函数的总结分析
2013/06/05 PHP
JS 容错处理代码, 屏蔽错误信息
2021/03/09 Javascript
点击广告后才能获得下载地址
2006/10/26 Javascript
JS 创建对象(常见的几种方法)
2008/11/03 Javascript
JS无法捕获滚动条上的mouse up事件的原因猜想
2012/03/21 Javascript
JQuery切换显示的效果实例代码
2013/02/27 Javascript
仿JQuery输写高效JSLite代码的一些技巧
2015/01/13 Javascript
jQuery修改class属性和CSS样式整理
2015/01/30 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
2015/12/14 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
2016/09/05 Javascript
JS中Select下拉列表类(支持输入模糊查询)功能
2017/01/17 Javascript
vue如何从接口请求数据
2017/06/22 Javascript
NodeJs通过async/await处理异步的方法
2017/10/09 NodeJs
Vue.js自定义事件的表单输入组件方法
2018/03/08 Javascript
3分钟读懂移动端rem使用方法(推荐)
2019/05/06 Javascript
Angular利用HTTP POST下载流文件的步骤记录
2020/07/26 Javascript
JS+css3实现幻灯片轮播图
2020/08/14 Javascript
详解Swift中属性的声明与作用
2016/06/30 Python
Python argparse模块应用实例解析
2019/11/15 Python
Django中密码的加密、验密、解密操作
2019/12/19 Python
python 输出列表元素实例(以空格/逗号为分隔符)
2019/12/25 Python
Pandas实现DataFrame按行求百分数(比例数)
2019/12/27 Python
python 装饰器的使用示例
2020/10/10 Python
Appium+Python实现简单的自动化登录测试的实现
2021/01/26 Python
css3 条纹化和透明化表格Firefox下测试成功
2014/04/15 HTML / CSS
xml有哪些解析技术?区别是什么
2016/04/26 面试题
财务会计自荐信范文
2014/02/21 职场文书
《雪地里的小画家》教学反思
2014/02/22 职场文书
个人工作表现评语
2014/04/30 职场文书
企业法人授权委托书
2014/09/25 职场文书
小学生作文评语集锦
2014/12/25 职场文书
小学班主任自我评价
2015/03/11 职场文书
宿舍管理制度范本
2015/08/07 职场文书
如何判断pytorch是否支持GPU加速
2021/06/01 Python
Python编写车票订购系统 Python实现快递收费系统
2022/08/14 Python