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 ...
随机推荐
- OpenJudge计算概论-字符串最大跨距
/*====================================================================== 字符串最大跨距 总时间限制: 1000ms 内存限制: ...
- OpenJudge计算概论-中位数
/*============================================================== 中位数 总时间限制: 2000ms 内存限制: 65536kB 描述 ...
- MySQL查询本周、上周、本月、上个月份数据的sql代码
查询当前这周的数据 SELECT name,submittime FROM enterprise WHERE YEARWEEK(date_format(submittime,'%Y-%m-%d')) ...
- js中冒泡事件和捕获事件
js中冒泡事件和捕获事件: 冒泡事件:冒泡事件是从里向外,即是从被绑定元素开始一直向外到达页面的所有祖先元素都会被触发,这 一过程被称为事件冒泡.这个事件从原始元素开始一直冒泡到DOM树的最上层 捕获 ...
- 利用Swift之协议语法实现页面间的传值功能
随着Swift 新开发语言的发布,又随着Xcode6.0.1的正式发布,利用swift编写iOS代码迫在眉睫,笔者在使用Objective-C开发近三年以来,对这种优雅的语法深感赞叹,下面我将对比式的 ...
- 《腾讯敏捷框架TAPD》研究
1 框架结构 1.1 产品 TAPD采用FDD模式开发,FDD即特征驱动开发. FDD的核心是面向产品的功能点,但这个功能点是从客户角度出发的,并不是从系统角度出来的. ...
- 制作OS X 10.10.3启动安装U盘
http://www.cnblogs.com/Bob-wei/p/4471407.html 1.获得“Install OS X Yosemite.app” 2.准备一个8GB的U盘,用磁盘工具“抹掉” ...
- Servlet Listener
需要继承ServletContextListener接口. 代码: package com.my; import java.io.*; import javax.servlet.*; import j ...
- 程序员书单_HTML篇
JavaScript权威指南(第六版) http://download.csdn.net/detail/shenzhq1980/9137733 改善JavaScript程序的188个建议 http:/ ...
- 设计模式初学者笔记:Factory Method模式
如果要选择一种最多人熟悉的Factory Method模式的具体应用,那么就应该是MFC的App/Doc架构了.Factory Method主要在类框架中使用,以解决以下问题:框架必须实例化类,但框架 ...