//页面加载完执行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动态进行图片缩略的更多相关文章

  1. 使用jQuery动态改变图片显示大小

    当我们要显示后台传过来若干个尺寸不一的图片时,为了保证图片大小的一致性及比例的协调,需要动态改变图片显示尺寸.通过搜索,我们可以从网上找到实现此 功能的jQuery代码如下.这段代码可以使图片的大小保 ...

  2. jquery动态设置图片路径和超链接href属性

    js document.getElementById("myImage").src="hackanm.gif"; jquery $("#img&quo ...

  3. img超出div width时, jQuery动态改变图片显示大小

    参考: 1. http://blog.csdn.net/roman_yu/article/details/6641911 2. http://www.cnblogs.com/zyzlywq/archi ...

  4. 图片查看器(类似于QQ,另外又加了JARA的下方的图片缩略导航图)

    源码地址:https://gitee.com/yolanda624/coffer/tree/master/src/components/a-photo-view

  5. 如何解决谷歌浏览器下jquery无法获取图片的尺寸

    代码如下: $(document).ready(function(){ var img_h=$img.height(); var img_w=$img.width(); }) 以上代码在IE和火狐中没 ...

  6. jquery插件--多行文本缩略

    1.webkit内核多行缩略样式 text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orie ...

  7. Android图片与缩略

    /** * 将图片文件原比例缩略.并使其不超过最大宽.高 * @param path : 图片文件 * @param requestW : 缩略后最大宽度 * @param requestH : 缩略 ...

  8. js和jquery如何获取图片真实的宽度和高度

    按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式,下面为大家介绍下js和jquery如何获取图片真实的宽度和高度   1.什么时候需要获取图片真实的宽度和高度 在做pc网页 ...

  9. jQuery动态提示消息框效果

    效果预览:http://keleyi.com/keleyi/phtml/jqtexiao/2.htm 原文:http://keleyi.com/a/bjac/hxv86dyi.htm <!DOC ...

随机推荐

  1. Python3下map函数的显示问题

    map函数是Python里面比较重要的函数,设计灵感来自于函数式编程.Python官方文档中是这样解释map函数的: map(function, iterable, ...) Return an it ...

  2. HttpModule和Http Handler (比较与区别)

    HttpModule和Http Handler (比较与区别) HttpModule概述 暂时先不考虑我们自己实现Http Module的情况.在.Net中,Http Module 是实现了IHttp ...

  3. shell之eval-command

    本文将会讲解一些linux中命令的使用与技巧希望对新手给予帮助一 e v a l命令将会首先扫描命令行进行所有的置换,然后再执行该命令.该命令适用于那些一次扫描无法实现其功能的变量.该命令对变量进行两 ...

  4. wamp下Apache2.4.x局域网访问403的解决办法

    1.我们打开Apache目录\wamp\bin\apache\apache2.4.9下的“conf”文件夹,找到httpd.conf. 2.找到#   onlineoffline tag - don' ...

  5. js事件源window.event.srcElement兼容性写法

    <html> <body> <p>一个好处就是 我想让body(或其他元素内)的某些对象响应事件 就不用挨个儿去写 只要在外层上写一个 然后检查event.srcE ...

  6. selenium+python自动化之xpath定位

    在上一篇简单的介绍了用工具查看目标元素的xpath地址,工具查看比较死板,不够灵活,有时候直接复制粘贴会定位不到.这个时候就需要自己手动的去写xpath了,这一篇详细讲解xpath的一些语法. 什么是 ...

  7. asp.net 计算两个时间差

    两个时间相差多少 .net中的timespan应用2008/11/10 11:54TimeSpan 对象表示时间间隔或持续时间,按正负天数.小时数.分钟数.秒数以及秒的小数部分进行度量.用于度量持续时 ...

  8. win7下MariaDB10.0的my.ini配置文件的位置

    msi版本的,安装后在安装目录下的\data\my.ini 常用的配置选项: 1.修改默认的存储引擎 在配置文件my.ini(linxu下为my.cnf) 中的 [mysqld] 下面加入defaul ...

  9. Ruby Class

    类定义: class 类名 类定义 end ※类名大写字母开始!!! 构造方法(initialize) 类名调用new方法的时候,触发的一个方法. def initialize(my_name = & ...

  10. Jaxb笔记

    摘自: http://www.blogjava.net/eagle-daiq/archive/2012/01/30/369016.html 最近项目原因,研究了下jaxb.jaxb是Java api ...