Jquery动态进行图片缩略
//页面加载完执行resizeImage()函数
$(document).ready(resizeImage()); function resizeImage(){
$(".pic a img").each(function(){
//加载图片至内存,完成后执行
$(this).load(function(){
//获得原始图片高宽
var imgWidth = $(this).width();
var imgHeight = $(this).height();
//获得图片所在Div高宽
var boxWidth=$('.pic').width();
var boxHeight=$('.pic').height();
//比较imgBox的长宽比与img的长宽比大小
if((boxWidth/boxHeight)>=(imgWidth/imgHeight))
{
//重新设置img的width和height
$(this).width((boxHeight*imgWidth)/imgHeight);
$(this).height(boxHeight);
//让图片居中显示
var margin=(boxWidth-$(this).width())/2;
$(this).css("margin-left",margin);
}
else
{
//重新设置img的width和height
$(this).width(boxWidth);
$(this).height((boxWidth*imgHeight)/imgWidth);
//让图片居中显示
var margin=(boxHeight-$(this).height())/2;
$(this).css("margin-top",margin);
}
});
})
}
推荐一个自己业余时间开发的网盘搜索引擎,360盘搜(www.360panso.com)
Jquery动态进行图片缩略的更多相关文章
- 使用jQuery动态改变图片显示大小
当我们要显示后台传过来若干个尺寸不一的图片时,为了保证图片大小的一致性及比例的协调,需要动态改变图片显示尺寸.通过搜索,我们可以从网上找到实现此 功能的jQuery代码如下.这段代码可以使图片的大小保 ...
- jquery动态设置图片路径和超链接href属性
js document.getElementById("myImage").src="hackanm.gif"; jquery $("#img&quo ...
- img超出div width时, jQuery动态改变图片显示大小
参考: 1. http://blog.csdn.net/roman_yu/article/details/6641911 2. http://www.cnblogs.com/zyzlywq/archi ...
- 图片查看器(类似于QQ,另外又加了JARA的下方的图片缩略导航图)
源码地址:https://gitee.com/yolanda624/coffer/tree/master/src/components/a-photo-view
- 如何解决谷歌浏览器下jquery无法获取图片的尺寸
代码如下: $(document).ready(function(){ var img_h=$img.height(); var img_w=$img.width(); }) 以上代码在IE和火狐中没 ...
- jquery插件--多行文本缩略
1.webkit内核多行缩略样式 text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orie ...
- Android图片与缩略
/** * 将图片文件原比例缩略.并使其不超过最大宽.高 * @param path : 图片文件 * @param requestW : 缩略后最大宽度 * @param requestH : 缩略 ...
- js和jquery如何获取图片真实的宽度和高度
按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式,下面为大家介绍下js和jquery如何获取图片真实的宽度和高度 1.什么时候需要获取图片真实的宽度和高度 在做pc网页 ...
- jQuery动态提示消息框效果
效果预览:http://keleyi.com/keleyi/phtml/jqtexiao/2.htm 原文:http://keleyi.com/a/bjac/hxv86dyi.htm <!DOC ...
随机推荐
- jquery得到iframe src属性值的方法
这篇文章主要介绍了jquery得到iframe src属性值的方法,很简单,很实用,需要的朋友可以参考下 取得iframe src属性的的值: Html代码 <!DOCTYPE HTML> ...
- SQL server 2008 Express Edition实现自动备份和自动删除备份
1.查看SQL 版本: select @@VERSION --可以看到 Express Edition 精简免费版 Microsoft SQL Server 2008 R2 (SP2) - 10.50 ...
- 【转】一个域名对应多个IP地址,接下来系统是依据什么决定使用哪个IP地址的?
例如下图所示:nslookup http://www.sina.com.cn返回了多个IP地址,当使用curl通过域名进行访问时,则自动选择了其中一个地址进行访问,这个选择的过程里发生了什么事情? 绝 ...
- RMAN备份数据库与恢复数据库(整库)
1 准备 2 1.1 检查数据库归档状态 2 1.2 RMAN登陆目标 2 2 备份全库 2 2.1 创建备份数据存储目录 2 2.2 RMAN备份全库 2 2.3 试验(备份后,改变数据) 5 2. ...
- JavaScript判断字符串能否转化为数字
判断一个字符串能否转化为数字 我们常常使用parseInt函数. 不过该函数的适用范围是很小的. 一般说来对于 如下类似 var myStr = "123hello"; 使用par ...
- 【shiro】org.apache.shiro.authc.IncorrectCredentialsException: Submitted credentials for token
org.apache.shiro.authc.IncorrectCredentialsException: Submitted credentials for token [org.apache.sh ...
- 06socket编程
socket可以看成是用户进程与内核网络协议栈的编程接口. socket不仅可以用于本机的进程间通信,还可以用于网络上不同主机的进程间通信. IPv4套接口地址结构通常也称为“网际套接字地址结构”,它 ...
- js为DIV动态设置id属性
<script> var objs=document.getElementById("iproduct").getElementsByTagName("div ...
- LintCode "Maximum Gap"
Bucketing! A lot of details to take care. struct Bucket { Bucket() :l(-), r(-), bValid(false){}; int ...
- 剑指offer系列44---只出现一次 的数字
[题目]一个整型数组里除了两个数字之外,其他的数字都出现了两次.请写程序找出这两个只出现一次的数字. * [思路]异或性质:数异或自己即为0: * 一个数组中,从头到尾异或的结果为不重复数字异或结果. ...