Jquery动态进行图片缩略

时间:2022-09-06 08:50:19
//页面加载完执行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. Map接口使用注意事项

    1,Map接口对象本身不能直接使用迭代进行输出的.因为map每个位置存放的是一对值. 而iterator每次只能找到一个值.如果一定要迭代输出,可以通过以下步骤.: 但是,Map接口只作为查找使用,输 ...

  2. springmvc&plus;spring-security&plus;mybatis &plus;redis &plus;solar框架抽取

    参考文章:Spring MVC 3 深入总结: 第二章 Spring MVC入门 —— 跟开涛学SpringMVC 参考博客:http://www.cnblogs.com/liukemng/categ ...

  3. mac--mac杂记

    zsh路径补全.命令补全,命令参数补全,插件内容补全等等.触发补全只需要按一下或两下tab键,补全项可以使用ctrl+n/p/f/b上下左右切换. plugins=(git textmate ruby ...

  4. 1710&colon; &lbrack;Usaco2007 Open&rsqb;Cheappal 廉价回文

    Description 为 了跟踪所有的牛,农夫JOHN在农场上装了一套自动系统. 他给了每一个头牛一个电子牌号 当牛走过这个系统时,牛的名字将被自动读入. 每一头牛的电子名字是一个长度为M (1 & ...

  5. 巧妙的Jq仿QQ游戏导航界面学习

    先贴上源代码 <!doctype html> <html> <head> <meta charset="utf-8"> <ti ...

  6. JAVA WEB快速入门之环境搭建

    前言 我是一直致力于:.NET技术栈.WEB前端.架构设计相关的开发与管理工作,但因国内大环境影响及公司技术方向发生转变(由.NET全部转为JAVA),需要熟练掌握JAVA WEB相关的知识,故我也得 ...

  7. PS调出春夏外景婚纱照

    效果图 先来看看原图和夏季的效果图 先看看原图 教程终于来咯 原图暗部太深,需要将暗部提亮.可以把暗部选区选出来.为了精确选择暗部选区,我利用计算命令如上图所示.最后得到暗部的选区. 上图得到了暗部选 ...

  8. C&plus;&plus;常见函数使用

    备注:总结C++中一些常见函数的使用,提高工作效率 数组的拼接: //报文头的前6B固定 DRV_UCHAR pkt_info_head[PALIVE_TO_NP_LEN] = {0x70, 0xff ...

  9. EZ 2017 12 17初二初三第一次膜你赛

    以后平时练习还是写一写吧. (题目搞来搞去太烦了,直接PDF存起来) T1 水题(???),主要是数据水,正解是设一个阙值,然而根本没人打.(暴力出奇迹) CODE #include<cstdi ...

  10. 突破MSDE 的2GB数据限制

    Windows Registry Editor Version 5.00 [HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\MSSQLServer\MSSQLServer\ ...