Jquery动态进行图片缩略的原理及实现


Posted in Javascript onAugust 13, 2013
//页面加载完执行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); 
} 
}); 
}) 
}
Javascript 相关文章推荐
JS可以控制样式的名称写法一览
Jan 16 Javascript
jquery validate 自定义验证方法介绍 日期验证
Feb 27 Javascript
js实现页面跳转的五种方法推荐
Mar 10 Javascript
浅析Ajax语法
Dec 05 Javascript
JQ中$(window).load和$(document).ready区别与执行顺序
Mar 01 Javascript
微信小程序 动态传参实例详解
Apr 27 Javascript
JS ES6中setTimeout函数的执行上下文示例
Apr 27 Javascript
浅谈vue首屏加载优化
Jun 28 Javascript
详解vuex状态管理模式
Nov 01 Javascript
JavaScript怎样在删除前添加确认弹出框?
May 27 Javascript
vue使用localStorage保存登录信息 适用于移动端、PC端
May 27 Javascript
详解vue或uni-app的跨域问题解决方案
Feb 21 Javascript
javascript中RegExp保留小数点后几位数的方法分享
Aug 13 #Javascript
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
Aug 13 #Javascript
jquery二级导航内容均分的原理及实现
Aug 13 #Javascript
模拟多级复选框效果的jquery代码
Aug 13 #Javascript
javascript 树形导航菜单实例代码
Aug 13 #Javascript
Jquery操作下拉框(DropDownList)实现取值赋值
Aug 13 #Javascript
javascript实现div浮动在网页最顶上并带关闭按钮效果实例
Aug 13 #Javascript
You might like
IIS下配置Php+Mysql+zend的图文教程
2006/12/08 PHP
PHP文章按日期(月日)SQL归档语句
2012/11/29 PHP
php设计模式小结
2013/02/15 PHP
php实现文件下载实例分享
2014/06/02 PHP
php检测url是否存在的方法
2015/04/14 PHP
PHP中字符串长度的截取用法示例
2017/01/12 PHP
超酷的网页音乐播放器DewPlayer使用方法
2010/12/18 Javascript
jquery如何把参数列严格转换成数组实现思路
2013/04/01 Javascript
iframe父页面获取子页面参数的方法
2014/02/21 Javascript
jquery实现的导航固定效果
2014/04/28 Javascript
通过js为元素添加多项样式,浏览器全兼容写法
2014/08/30 Javascript
javascript实现图片自动和可控的轮播切换特效
2015/04/13 Javascript
js实现漂亮的星空背景
2019/11/01 Javascript
[01:02:20]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python中对list去重的多种方法
2014/09/18 Python
Win7下Python与Tensorflow-CPU版开发环境的安装与配置过程
2018/01/04 Python
对python中执行DOS命令的3种方法总结
2018/05/12 Python
python面向对象入门教程之从代码复用开始(一)
2018/12/11 Python
python交换两个变量的值方法
2019/01/12 Python
OpenCV里的imshow()和Matplotlib.pyplot的imshow()的实现
2019/11/25 Python
PyQt5中QTableWidget如何弹出菜单的示例代码
2020/02/23 Python
pygame实现飞机大战
2020/03/11 Python
基于plt.title无法显示中文的快速解决
2020/05/16 Python
Python基于os.environ从windows获取环境变量
2020/06/09 Python
pytorch中的weight-initilzation用法
2020/06/24 Python
html5各种页面切换效果和模态对话框用法总结
2014/12/15 HTML / CSS
Skyscanner香港:机票比价, 平机票和廉价航空机票预订
2020/02/07 全球购物
活动志愿者自荐信
2014/01/27 职场文书
岗位廉洁从业承诺书
2014/03/28 职场文书
工商干部先进事迹
2014/05/14 职场文书
公司优秀员工获奖感言
2014/08/14 职场文书
学校领导班子对照检查材料
2014/09/24 职场文书
优秀教师单行材料
2014/12/16 职场文书
音乐课《小猫钓鱼》教学反思
2016/02/18 职场文书
辞职报告(范文三篇)
2019/08/27 职场文书
一文读懂go中semaphore(信号量)源码
2021/04/03 Golang