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 相关文章推荐
javascript实现分栏显示小技巧附图
Oct 13 Javascript
详解JavaScript的变量和数据类型
Nov 27 Javascript
Javascript中的数组常用方法解析
Jun 17 Javascript
Bootstrap和Java分页实例第一篇
Dec 23 Javascript
svg动画之动态描边效果
Feb 22 Javascript
原生js实现简单的链式操作
Jul 04 Javascript
mpvue+vuex搭建小程序详细教程(完整步骤)
Sep 30 Javascript
简单实现vue中的依赖收集与响应的方法
Feb 18 Javascript
基于axios 的responseType类型的设置方法
Oct 29 Javascript
详解vue3.0 diff算法的使用(超详细)
Jul 01 Javascript
vue页面引入three.js实现3d动画场景操作
Aug 10 Javascript
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
Apr 24 Vue.js
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
《心理测量者3》剧场版动画预告
2020/03/02 日漫
牡丹941资料
2021/03/01 无线电
php操作csv文件代码实例汇总
2014/09/22 PHP
thinkphp命名空间用法实例详解
2015/12/30 PHP
最新版本PHP 7 vs HHVM 多角度比较
2016/02/14 PHP
php 静态属性和静态方法区别详解
2017/04/09 PHP
PHP+mysql防止SQL注入的方法小结
2019/04/27 PHP
jquery中实现简单的tabs插件功能的代码
2011/03/02 Javascript
javascript中方便增删改cookie的一个类
2012/10/11 Javascript
jQuery创建平滑的页面滚动(顶部或底部)
2013/02/26 Javascript
js 时间函数应用加、减、比较、格式转换的示例代码
2013/08/23 Javascript
jquery $.trim()方法使用介绍
2014/05/21 Javascript
原生js事件的添加和删除的封装
2014/07/01 Javascript
jQuery窗口、文档、网页各种高度的精确理解
2014/07/02 Javascript
JS添加删除DIV的简单实例
2016/07/08 Javascript
webpack 插件html-webpack-plugin的具体使用
2018/04/09 Javascript
JS实现换肤功能的方法实例详解
2019/01/30 Javascript
javascript设计模式 ? 中介者模式原理与用法实例分析
2020/04/20 Javascript
微信 用脚本查看是否被微信好友删除
2016/10/28 Python
python enumerate函数的使用方法总结
2017/11/15 Python
Python操作Redis之设置key的过期时间实例代码
2018/01/25 Python
mac下pycharm设置python版本的图文教程
2018/06/13 Python
python 使用sys.stdin和fileinput读入标准输入的方法
2018/10/17 Python
Python基于smtplib模块发送邮件代码实例
2020/05/29 Python
HTML 5 标签、属性、事件及浏览器兼容性速查表 附打包下载
2012/10/20 HTML / CSS
函数指针的定义是什么
2016/08/14 面试题
销售总监工作职责
2013/11/21 职场文书
城市轨道交通工程职业规划书范文
2014/01/18 职场文书
小学毕业寄语大全
2014/04/03 职场文书
2016年春节慰问信息
2015/03/25 职场文书
长征观后感
2015/06/09 职场文书
深入理解python多线程编程
2021/04/18 Python
仅用一句SQL更新整张表的涨跌幅、涨跌率的解决方案
2021/05/06 MySQL
python装饰器代码解析
2022/03/23 Python
Python利用Turtle绘制哆啦A梦和小猪佩奇
2022/04/04 Python
MySQL中LAG()函数和LEAD()函数的使用
2022/08/14 MySQL