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 相关文章推荐
动态加载js文件 document.createElement
Oct 14 Javascript
在父页面调用子页面的JS方法
Sep 29 Javascript
JavaScript将页面表格导出为Excel的具体实现
Dec 27 Javascript
CSS javascript 结合实现悬浮固定菜单效果
Aug 23 Javascript
jQuery学习心得总结(必看篇)
Jun 10 Javascript
对js eval()函数的一些见解
Aug 15 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
Jul 10 Javascript
JavaScript实现二维坐标点排序效果
Jul 18 Javascript
解决layui前端框架 form表单,table表等内置控件不显示的问题
Aug 19 Javascript
node.js微信小程序配置消息推送的实现
Feb 13 Javascript
vue实现微信获取用户信息的方法
Mar 21 Javascript
关于引入vue.js 文件的知识点总结
Jan 28 Javascript
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
php中显示数组与对象的实现代码
2011/04/18 PHP
PHP+Mysql+jQuery实现动态展示信息
2011/10/08 PHP
有关于PHP中常见数据类型的汇总分享
2014/01/06 PHP
PHP中$_FILES的使用方法及注意事项说明
2014/02/14 PHP
PHP利用imagick生成组合缩略图
2016/02/19 PHP
PHP ADODB实现事务处理功能示例
2018/05/25 PHP
PHP中mysqli_get_server_version()的实例用法
2020/02/03 PHP
二行代码解决全部网页木马
2008/03/28 Javascript
动态样式类封装JS代码
2009/09/02 Javascript
Jquery插件写法笔记整理
2012/09/06 Javascript
关于火狐(firefox)及ie下event获取的两种方法
2012/12/27 Javascript
requireJS使用指南
2016/04/27 Javascript
jQuery文件上传控件 Uploadify 详解
2016/06/20 Javascript
Angularjs 依赖压缩及自定义过滤器写法
2017/02/04 Javascript
js实现自动图片轮播代码
2017/03/22 Javascript
ES6中Generator与异步操作实例分析
2017/03/31 Javascript
NodeJS实现视频转码的示例代码
2017/11/18 NodeJs
vue实现引入本地json的方法分析
2018/07/12 Javascript
nodejs中内置模块fs,path常见的用法说明
2020/11/07 NodeJs
vue 页面跳转的实现方式
2021/01/12 Vue.js
Nodejs 数组的队列以及forEach的应用详解
2021/02/25 NodeJs
python实现排序算法
2014/02/14 Python
Python标准库sched模块使用指南
2017/07/06 Python
jupyter notebook 使用过程中python莫名崩溃的原因及解决方式
2020/04/10 Python
python程序需要编译吗
2020/06/19 Python
爱游人:Travelliker
2017/09/05 全球购物
廉价连衣裙和婚纱礼服在线销售:Tbdress
2019/02/28 全球购物
anello泰国官方网站:日本流行包包品牌
2019/08/08 全球购物
简述索引存取方法的作用和建立索引的原则
2013/03/26 面试题
中间件分为哪几类
2012/03/14 面试题
家长评语大全
2014/01/22 职场文书
中式婚礼主持词
2014/03/13 职场文书
2015个人半年总结范文
2015/03/09 职场文书
农村婚庆主持词
2015/06/29 职场文书
Python matplotlib 利用随机函数生成变化图形
2022/04/26 Python
源码安装apache脚本部署过程详解
2022/09/23 Servers