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 先说说业务场景:类似朋友圈这样的布局效果,点击 ...
随机推荐
- Github开源Java项目(Disconf)上传到Maven Central Repository方法详细介绍
最近我做了一个开源项目 Disconf:Distributed Configuration Management Platform(分布式配置管理平台) ,简单来说,就是为所有业务平台系统管理配置文件 ...
- Ubunte 11.4 下安装 SSH遇到的问题
第一次安装报了一堆错,主要是也http 404 not found之类的,搜索了一番怀疑是apt的source list的问题. 网上找到一份替换之,我用的是搜狐的服务器.网址如下: http://b ...
- 从客户端检测到危险的Request.Form值解决方案
1.修改aspx页面中的代码,设置ValidateRequest="false" <%@ Page Language="C#" AutoEventWire ...
- 《大话移动 APP 测试》
<大话移动 APP 测试> wiki: Software testing 第5章 常用工具介绍和实践 Android.iOS Monkey Android SDK 提供的一个工具:发送伪随 ...
- 自定义悬浮按钮:FloatingButton
floating_button_layout.xml <?xml version="1.0" encoding="utf-8"?> <Rela ...
- Catel(翻译)-为什么选择Catel
1. 介绍 这篇文章主要是为了说明,我们为什么要使用Catel框架作为开发WPF,Silverlight,和Windows phone7应用程序的开发框架. 2. 通用功能 2. ...
- ORA-02095: specified initialization parameter cannot be modified
输入命令:alter system set utl_file_dir='/home/oracle/logmnr' scope=spfile; 报错: 出错原因:没有用spfile文件启动数据库 解决办 ...
- objectivc-c---block
基本格式: returnType (^blockName[num])(paramList|void) = ^returnType(paramList|void){block Body}; 标红部分可根 ...
- java文件io过滤器
package cn.stat.p1.file; import java.io.File; public class newfilelist { /** * @param args */ public ...
- C++编译指令#pragma pack的配对使用
#pragma pack可以用来指定C++数据结构的成员变量的内存对齐数值(可选值为1,2,4,8,16). 本文主要是强调在你的头文件中使用pack指令要配对使用,以避免意外影响项目中其他源文件的结 ...