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一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera
Aug 28 Javascript
jquery利用event.which方法获取键盘输入值的代码
Oct 09 Javascript
封装的jquery翻页滚动(示例代码)
Nov 18 Javascript
js操作模态窗口及父子窗口间相互传值示例
Jun 09 Javascript
jquery实现动态操作select选中
Feb 11 Javascript
基于jQuery创建鼠标悬停效果的方法
Mar 07 Javascript
JavaScript数组对象赋值用法实例
Aug 04 Javascript
jQuery编程中的一些核心方法简介
Aug 14 Javascript
基于javascript实现按圆形排列DIV元素(二)
Dec 02 Javascript
Vue实现双向数据绑定
May 03 Javascript
深入浅出es6模板字符串
Aug 26 Javascript
Element-ui table中过滤条件变更表格内容的方法
Mar 02 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
Memcached常用命令以及使用说明详解
2013/06/27 PHP
百度工程师讲PHP函数的实现原理及性能分析(一)
2015/05/13 PHP
详解PHP变量传值赋值和引用赋值变量销毁
2019/03/23 PHP
JavaScript去掉空格的方法集合
2010/12/28 Javascript
js简单实现HTML标签Select联动带跳转
2013/10/23 Javascript
javascript背景时钟实现方法
2015/06/18 Javascript
javascript学习总结之js使用技巧
2015/09/02 Javascript
JS实现具备延时功能的滑动门菜单效果
2015/09/17 Javascript
基于JavaScript实现轮播图代码
2016/07/14 Javascript
JavaScript实现DOM对象选择器
2016/09/24 Javascript
Bootstrap基本插件学习笔记之折叠(22)
2016/12/08 Javascript
JS变量及其作用域
2017/03/29 Javascript
详解NodeJs开发微信公众号
2018/05/25 NodeJs
Vue数据双向绑定的深入探究
2018/11/27 Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
2019/04/24 Javascript
p5.js实现动态图形临摹
2019/10/23 Javascript
JavaScript 俄罗斯方块游戏实现方法与代码解释
2020/04/08 Javascript
基于Vue sessionStorage实现保留搜索框搜索内容
2020/06/01 Javascript
JQuery+drag.js上传图片并且实现图片拖曳
2020/11/18 jQuery
Vue如何实现变量表达式选择器
2021/02/18 Vue.js
Flask模拟实现CSRF攻击的方法
2018/07/24 Python
css3实现圆锥渐变conic-gradient效果
2020/02/12 HTML / CSS
canvas与html5实现视频截图功能示例
2016/12/15 HTML / CSS
德国化妆品和天然化妆品网上商店:kosmetikfuchs.de
2017/06/09 全球购物
Sunglasses Shop德国站:欧洲排名第一的太阳镜网站
2017/08/01 全球购物
C++:memset ,memcpy和strcpy的根本区别
2013/04/27 面试题
一年级班主任感言
2014/03/08 职场文书
《鸟岛》教学反思
2014/04/26 职场文书
ktv筹备计划书
2014/05/03 职场文书
正风肃纪剖析材料范文
2014/10/10 职场文书
2014年质量管理工作总结
2014/12/01 职场文书
城南旧事读书笔记
2015/06/29 职场文书
《观察物体》教学反思
2016/02/17 职场文书
2019年销售部季度工作计划3篇
2019/10/09 职场文书
python 如何执行控制台命令与操作剪切板
2021/05/20 Python
Python极值整数的边界探讨分析
2021/09/15 Python