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 先说说业务场景:类似朋友圈这样的布局效果,点击 ...
随机推荐
- servlet过滤器配置白名单、黑名单
1.web.xml配置 <filter> <description>过滤是否登陆</description> <filter-name>encoding ...
- 定义的返回按钮 Push到下一个页面后 手势返回无效解决办法
转自:http://zhangmingwei.iteye.com/blog/2080457 从iOS7的Beta版开始,就着手做兼容工作,到Beta4的時候,应用已经基本兼容,只是偶然发现,iOS样式 ...
- DedeCMS源码安装
一.源码下载地址 可以从以下网站下载DedeCMS源码进行安装,这里我下载了AB模板网的一个服装网站源码来演示DedeCMS源码的安装 http://www.adminbuy.cn/dedecms/2 ...
- 关于使用mybatis插件自动生成代码
1.安装 mybatis 插件: 在 eclipse 中 点击 help-->Install New Software...--> Add --> local 选择插件中eclip ...
- Android编程之ActivityManager: Segmentation fault
今天运行代码时,出现了一个不能运行的故障问题:ActivityManager: Segmentation fault 是的,这个原因网上有诸多解释:包名不能是中文或者非法字符,或者重启新的avd来解决 ...
- cocos2d-x 2.x 图层特效Effect(转)
CCSprite* sp = CCSprite::create("Default.png"); sp->setPosition(ccp(, )); addChild(sp); ...
- 忘记 mysql5.5.24 数据库 root 密码
兹整理如下,供网友参考 第一步:关闭mysql服务 第二步:新建txt 写入如下内容 UPDATE mysql.user SET Password=PASSWORD('blog.const.net.c ...
- DataGrid( 数据表格) 组件[5]
本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination( ...
- Sass运算
加法在 CSS 中能做运算的,到目前为止仅有 calc() 函数可行.在 Sass 中,运算只是其基本特性之一.在 Sass 中可以做各种数学计算.加法运算是 Sass 中运算中的一种,在变量或属性中 ...
- POJ 1930 Dead Fraction
POJ 1930 Dead Rraction 此题是一个将无限循环小数转化为分数的题目 对于一个数 x=0.abcdefdef.... 假设其不循环部分的长度为m(如abc的长度为m),循环节的长度为 ...