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 ...
随机推荐
- js定义变量需赋予初始值
这是console.log打印出来的日志,就是多了一个undefined 日志: hitTableObjectID:undefinedbfa4be7b-32fc-459a-9092-ecde316b3 ...
- Js文本溢出自动添加省略号ellipsis
原文: ellipsis: function(value, len, word) { //判断value有没有超过指定长度 if (value && v ...
- Mozilla Brick:一个Web组件Polyfill库
Web组件是一个W3C规范,它旨在使Web开发人员能够定义具有非常丰富的视觉效果和高可交互性且易于组合的小组件.Brick库提供了新的自定义HTML标签,从而抽象了用户常用接口模式.在浏览器本身支持类 ...
- 【转】Winform 去掉 最大化 最小化 关闭按钮(不是关闭按钮变灰)终极解决办法
不墨迹, 如图 : 网上 看了,好多 给的 答案 乱码七糟,都是扯淡,于是乎 自己 写,代码如下:窗体的大小暂时设置为:(598, 362) 涂红的数据根据你的窗体大小改动 using System; ...
- Send an email with format which is stored in a word document
1. Add a dll reference: Microsoft.Office.Interop.Word.dll 2. Add the following usings using Word = M ...
- StringBuilder与StringBuffer的区别(转)
相信大家看到过很多比较String和StringBuffer区别的文章,也明白这两者的区别,然而自从Java 5.0发布以后,我们的比较列表上将多出一个对象了,这就是StringBuilder类.St ...
- MySQL5.7.13源码编译安装指南(转)
系统 CenterOs 6.5 1.安装依赖包(cmake make gcc等,其实好多都有了,不需要更新,为了防止世界被破坏,就装下) yum install gcc gcc-c++ -yyum i ...
- R提高篇(五): 描述性统计分析
数据作为信息的载体,要分析数据中包含的主要信息,即要分析数据的主要特征(即数据的数字特征), 对于数据的数字特征, 包含数据的集中位置.分散程度和数据分布,常用统计项目如下: 集中趋势统计量: 均值 ...
- Android Wear(手表)开发 - 学习指南
版权声明:欢迎自由转载-非商用-非衍生-保持署名.作者:Benhero,博客地址:http://www.cnblogs.com/benhero/ Android Wear开发 - 学习指南 http: ...
- 【jmete】Bean shell使用(一)
一.什么是Bean Shell BeanShell是一种完全符合Java语法规范的脚本语言,并且又拥有自己的一些语法和方法; BeanShell是一种松散类型的脚本语言(这点和JS类似); BeanS ...