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]点出统计器
Oct 11 Javascript
jQuery数组处理代码详解(含实例演示)
Feb 03 Javascript
Javascript核心读书有感之语言核心
Feb 01 Javascript
jQuery 判断图片是否加载完成方法汇总
Aug 10 Javascript
JS 拼凑字符串的简单实例
Sep 02 Javascript
Bootstrap modal只加载一次数据的解决办法(推荐)
Nov 24 Javascript
jQuery实现的页面详情展开收起功能示例
Jun 11 jQuery
Angularjs中date过滤器失效的问题及解决方法
Jul 06 Javascript
Angular使用ControlValueAccessor创建自定义表单控件
Mar 08 Javascript
JS co 函数库的含义和用法实例总结
Apr 08 Javascript
基于javascript处理二进制图片流过程详解
Jun 08 Javascript
Element Cascader 级联选择器的使用示例
Jul 27 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
短波问题解答
2021/02/28 无线电
重新封装zend_soap实现http连接安全认证的php代码
2011/01/12 PHP
PHP使用SOAP调用.net的WebService数据
2013/11/12 PHP
微信自定义菜单的处理开发示例
2015/04/16 PHP
PHP采用超长(超大)数字运算防止数字以科学计数法显示的方法
2016/04/01 PHP
PHP类型约束用法示例
2016/09/28 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
javascript 实用的文字链提示框效果
2010/06/30 Javascript
JavaScript的React框架中的JSX语法学习入门教程
2016/03/05 Javascript
Bootstrap模态框(modal)垂直居中的实例代码
2016/08/18 Javascript
利用yarn实现一个webpack+react种子
2016/10/25 Javascript
js获取一组日期中最近连续的天数
2017/05/25 Javascript
vue实现全选、反选功能
2020/11/17 Javascript
详解Vue-Cli 异步加载数据的一些注意点
2017/08/12 Javascript
Node做中转服务器转发接口
2017/10/18 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
2017/10/26 Javascript
JS二分查找算法详解
2017/11/01 Javascript
微信小程序静默登录的实现代码
2020/01/08 Javascript
原生js实现贪吃蛇游戏
2020/10/26 Javascript
django初始化数据库的实例
2018/05/27 Python
使用python将图片按标签分入不同文件夹的方法
2018/12/08 Python
使用PIL(Python-Imaging)反转图像的颜色方法
2019/01/24 Python
Python中请不要再用re.compile了
2019/06/30 Python
使用Python快乐学数学Github万星神器Manim简介
2019/08/07 Python
python3实现raspberry pi(树莓派)4驱小车控制程序
2020/02/12 Python
Python装饰器的应用场景代码总结
2020/04/10 Python
关于iframe跨域使用postMessage的实现
2019/10/29 HTML / CSS
亚马逊中国官方网站:amazon.cn
2017/05/25 全球购物
世界上最具创新性的增强型知名运动品牌:Proviz
2018/04/03 全球购物
北京一家公司的.net开发工程师笔试题
2012/04/17 面试题
司法局群众路线教育实践活动整改措施
2014/09/17 职场文书
2015年小学生国庆节演讲稿
2015/07/30 职场文书
《日月潭》教学反思
2016/02/20 职场文书
2016优秀员工先进事迹材料
2016/02/25 职场文书
为什么不建议在go项目中使用init()
2021/04/12 Golang
python plt.plot bar 如何设置绘图尺寸大小
2021/06/01 Python