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=;
if(img.width<original.width){
percentage = ;
}else{
percentage = (original.width)/img.width;
}
image.width(img.w=img.width*percentage-).height(img.h=img.height*percentage);
$(window).resize(function(){
var w = $(this).width();
percentage = w/img.width>?:w/img.width;
var newWidth = img.width*percentage-;
var newHeight = img.height*percentage;
image.width(newWidth).height(newHeight);
});
});
});
};
})(jQuery);
使用方法:
$('img').resizeimage();
Jquery让图片根据浏览器窗口大小自动缩放的更多相关文章
- Android代码中动态设置图片的大小(自动缩放),位置
项目中需要用到在代码中动态调整图片的位置和设置图片大小,能自动缩放图片,用ImageView控件,具体做法如下: 1.布局文件 <RelativeLayout xmlns:android=&qu ...
- Jquery实现图片左右滚动(自动)
<!DOCTYPE HTML><html><head><title>基于jQuery的控制左右滚动效果_自动滚动版本</title>< ...
- mui 浏览器一样自动缩放
<!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...
- jquery如何监听浏览器窗口大小并根据不同的大小输出不同的值
$(window).bind("load resize",function(){ document.documentElement.clientWidth >= 600 ? ...
- JS自动缩放页面图片
/** * 缩略图 * * @param bool isScaling 是否缩放 * @param int width 宽度 * @param int height 高度 * @param strin ...
- JQuery 图片延迟加载并等比缩放插件
原文地址:http://www.shangxueba.com/jingyan/1909987.html DEMO地址:http://demo.jb51.net/html/jquery_img/jque ...
- html 网页背景图片根据屏幕大小CSS自动缩放
https://blog.csdn.net/coslay/article/details/47109281 腾讯微博和QQ空间的登录背景图片是根据访客的屏幕大小自动缩放的,但是好像是用JQuery代码 ...
- JQuery iframe宽高度自适应浏览器窗口大小的解决方法
iframe宽高度自适应浏览器窗口大小的解决方法 by:授客 QQ:1033553122 1. 测试环境 JQuery-3.2.1.min.js 下载地址: https://gitee.com ...
- jquery weui 图片浏览器Photo Browser
jquery weui 图片浏览器Photo Browser 如何使用? 对应组件地址:http://jqweui.com/extends#swiper 先说说业务场景:类似朋友圈这样的布局效果,点击 ...
随机推荐
- DVP
债券结算方式是指在债券结算业务中,债券的所有权转移或权利质押与相应结算款项的交收这两者执行过程中的不同制约形式.中央债券簿记系统中所设计的结算方式有:纯券过户.见券付款.见款付券.券款对付(DVP)四 ...
- Java中setCharAt()方法介绍
--转载自网络,备忘 这是StringBuffer类里面的一个方法:主要是用来替换的,方法里面有两个参数setCharAt(int index,Char ch),第一个参数是取代的位置 索引从0开始 ...
- JS浏览器对象-Location对象
1.返回web主机的域名 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- 【MySQL】关于MySQL错误日志信息的收集
为方便维护MySQL,写了个脚本用以提供收集错误信息的接口.这些错误信息来自与MySQL错误日志,而 通过grep mysql可以获取error-log的路径. #!/usr/bin/env pyth ...
- Android Clipboard(复制/剪贴板)
Android提供的剪贴板框架,复制和粘贴不同类型的数据.数据可以是文本,图像,二进制流数据或其它复杂的数据类型. Android提供ClipboardManager.ClipData.Item和Cl ...
- 自定义listView添加滑动删除功能
今天研究了一下android里面的手势,结合昨天学习的自定义View,做了一个自定义的listview,继承自listView,添加了条目的滑动手势操作,滑动后出现一个删除按钮,点击删除按钮,触发一个 ...
- struts2操作数据库
struts2操作数据库是刚開始学习的人的一个难点也是一个重点,如今我为大家解说一下struts2操作数据库,使用struts2对数据库进行增.删.改.查和分页查询,请看以下的代码: User类 pu ...
- cocos2dx--cocos2dx3.1.1执行报无法解析的外部符号
使用cocos2dx3.1.1和VS2012 新建了一个名为test的工程.放在D:\cocos2dx\cocos2d-x-3.1.1\projects下 编译通过,没问题 用cocostudio的场 ...
- 记录一下自己总结出来的,在内网环境下使用maven打包的各种方法,包括各种常用的打包方式(一)
(一)内外网代理仓库搭建 想了一下,先用这个MAVEN安装部署的说明随笔,作为自己的第一篇技术帖,往后会陆陆续续将自己研究的心得发出来,留下脚印.希望有大神可以指点 一 .文章主要解决问题说明 1) ...
- ICE 介绍及实现
.ICE是什么? ICE是ZEROC的开源通信协议产品,它的全称是:The Internet Communications Engine,翻译为中文是互联网通信引擎,是一个面向对象的中间件,使我们能够 ...