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 ...
随机推荐
- System.Web.HttpContext.Current 跟踪分析
public static HttpContext Current { get { return ContextBase.Current as HttpContext; } set { Context ...
- noip2014普及组——珠心算测验
题目描述 珠心算是一种通过在脑中模拟算盘变化来完成快速运算的一种计算技术.珠心算训练,既能够开发智力,又能够为日常生活带来很多便利,因而在很多学校得到普及. 某学校的珠心算老师采用一种快速考察珠 ...
- ActionContext详解
ActionContext ActionContext是Action的上下文,Struts2自动在其中保存了一些在Action执行过程中所需的对象,比如session, parameters, ...
- 运用cookie登陆人人网爬取数据
浏览器访问WEB服务器的过程 在用户访问网页时,不论是通过URL输入域名或IP,还是点击链接,浏览器向WEB服务器发出了一个HTTP请求(Http Request),WEB服务器接收到客户端浏览器的请 ...
- html之内联标签a
a标签:定义超链接,用于从一个页面链接到另一个页面,最重要的属性href,如果没有href属性,则不可以使用如下属性:download,hreflang,media,rel,target,type. ...
- apache commons vfs 文件夹监控
package test.vfs; import java.io.File; import org.apache.commons.logging.Log; import org.apache.comm ...
- Reporting Service 报表报 rsReportServerDatabaseError 错的解决方法
一.打开CRM的报表出现“报表服务器数据库内出错.此错误可能是因连接失败.超时或数据库中磁盘空间不足而导致的. (rsReportServerDatabaseError) 获取联机帮助 对象名 'Re ...
- Oracle序列使用:建立、删除
转自:http://www.cnblogs.com/WangPB/archive/2010/07/13/1776766.html 在开始讲解Oracle序列使用方法之前,先加一点关于Oracle cl ...
- [原]一个简单的Linux TCP Client所涉及到的头文件
今天在Linux环境下写了一个最简单的TCP Client程序,没想到Linux环境下的头文件竟然这么分散,让我这样的菜鸟很是郁闷啊.编译成功的代码如下: #include <iostream& ...
- 剑指offer系列60---第一个只出现一次的字符
[题目]在一个字符串(1<=字符串长度<=10000,全部由字母组成)中找到第一个只出现一次的字符的位置. * 若为空串,返回-1.位置索引从0开始 * [思路]1 首先遍历字符串数组,添 ...