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 相关文章推荐
jQeury淡入淡出需要注意的问题
Sep 08 Javascript
原生JS实现加入收藏夹的代码
Oct 24 Javascript
jQuery中Dom的基本操作小结
Jan 23 Javascript
jQuery老黄历完整实现方法
Jan 16 Javascript
JS for...in 遍历语句用法实例分析
Aug 24 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
Nov 21 Javascript
AngularJS开发教程之控制器之间的通信方法分析
Dec 25 Javascript
axios基本入门用法教程
Mar 25 Javascript
JavaScript实现左侧菜单效果
Dec 14 Javascript
react 移动端实现列表左滑删除的示例代码
Jul 04 Javascript
对TypeScript库进行单元测试的方法
Jul 18 Javascript
封装Vue Element的table表格组件的示例详解
Aug 19 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
利用PHP实现与ASP Banner组件相似的类
2006/10/09 PHP
真正根据utf8编码的规律来进行截取字符串的函数(utf8版sub_str )
2012/10/24 PHP
解析php取整的几种方式
2013/06/25 PHP
destoon二次开发模板及调用语法汇总
2014/06/21 PHP
php二维码生成
2015/10/19 PHP
PHP封装的MSSql操作类完整实例
2016/05/26 PHP
php实现session共享的实例方法
2019/09/19 PHP
document.open() 与 document.write()的区别
2007/08/13 Javascript
js中的escape及unescape函数的php实现代码
2007/09/04 Javascript
javascript得到XML某节点的子节点个数的脚本
2008/10/11 Javascript
使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇
2010/05/07 Javascript
浅谈Sticky组件的改进实现
2016/03/22 Javascript
jQuery简单实现彩色云标签效果示例
2016/08/01 Javascript
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
2016/08/25 Javascript
JavaScript 深层克隆对象详解及实例
2016/11/03 Javascript
jquery实现百叶窗效果
2017/01/12 Javascript
JavaScript原生节点操作小结
2017/01/17 Javascript
Vue 仿QQ左滑删除组件功能
2018/03/12 Javascript
基于Vue实现拖拽功能
2020/07/29 Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
2018/11/02 Javascript
JS面向对象编程实现的拖拽功能案例详解
2020/03/03 Javascript
js实现随机点名器精简版
2020/06/29 Javascript
微信小程序实现多张图片上传功能
2020/11/18 Javascript
Python中你应该知道的一些内置函数
2017/03/31 Python
python 解压pkl文件的方法
2018/10/25 Python
Python提取特定时间段内数据的方法实例
2019/04/01 Python
python文字转语音的实例代码分析
2019/11/12 Python
在pycharm中使用pipenv创建虚拟环境和安装django的详细教程
2020/11/30 Python
canvas粒子动画背景的实现示例
2018/09/03 HTML / CSS
英国独特礼物想法和个性化礼物网站:notonthehighstreet.com
2018/04/16 全球购物
中东地区最大的奢侈品市场:The Luxury Closet
2019/04/09 全球购物
三年大学生活自我鉴定
2014/01/21 职场文书
危爆物品安全大检查大整治工作方案
2014/05/03 职场文书
爱与责任演讲稿
2014/05/20 职场文书
励志演讲稿600字
2014/08/21 职场文书
赔偿协议书范本
2014/09/12 职场文书