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 先说说业务场景:类似朋友圈这样的布局效果,点击 ...
随机推荐
- Junit 学习
一. 断言核心方法 示例代码: package com.test; import org.junit.Assert; import org.junit.Test; /** * @Title: test ...
- 使用nvm来管理nodejs版本
nvm 是 Mac 下的 node 管理工具,有点类似管理 Ruby 的 rvm,如果是需要管理 Windows 下的 node,官方推荐是使用 nvmw 或 nvm-windows .nvm主要用来 ...
- C++编程规范之17:避免使用“魔数”
摘要: 程序设计并非魔术,所以不要故弄玄虚,要避免在代码中使用诸如42和3.1415926这样的文字常量.它们本身没有提供任何说明,并且因为增加了难于检测的重复而使维护更加复杂.可以用符号名称和表达式 ...
- HybridApp开发准备工作——WebView
如大家所见,手机真是越来越离不开我们的日常生活了,像我,现在出门必带的是手机.移动电源.公交卡:钱包什么的再也没出过门.两年前,我还在Android的应用开发中当了一次过客.嗯,当时JAVA学得太糟糕 ...
- Java调用天气Webservice的小应用
废话不多说,直接贴代码: CityReq.java package com.weather; import javax.xml.bind.annotation.XmlElement; import j ...
- 禁止chrome中CORS跨域资源共享错误
在开发中,可以通过命令行命令chrome --allow-file-access-from-files来 禁止CORS错误. 只在紧急情况下使用这个方法,比如你的老板正站在你身后, 并且所有事情都无法 ...
- GDI相关基础知识
原文链接:http://blog.csdn.net/poem_qianmo/article/details/7333886 GDI(Graphics Device Interface) 图形设备接口, ...
- 在iis中调试asp.net程序
第一步,在iis中新建一个网站,名称为Langben,“物理路径”选择你的程序的根目录,端口你可以随便设置一个数,我这里设置为8888(后面要用到哦). 第二步,应用程序池设置一下 第三步,接下来,在 ...
- 如何使用JSONP
1.使用$.getJSON() $.getJSON(" http://跨域的dns/document!searchJSONResult.action?name1="+value1+ ...
- MySQL按照汉字的拼音排序(转)
按照汉字的拼音排序,用的比较多是在人名的排序中,按照姓氏的拼音字母,从A到Z排序: 如果存储姓名的字段采用的是GBK字符集,那就好办了,因为GBK内码编码时本身就采用了拼音排序的方法(常用一级汉字37 ...