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 相关文章推荐
asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
Mar 14 Javascript
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
May 13 Javascript
js控制鼠标事件移动及移出效果显示
Oct 19 Javascript
javascript与Python快速排序实例对比
Aug 10 Javascript
JS实现的左侧竖向滑动菜单效果代码
Oct 19 Javascript
javascript中window.open在原来的窗口中打开新的窗口(不同名)
Nov 15 Javascript
Vue.js学习之过滤器详解
Jan 22 Javascript
详解webpack提取第三方库的正确姿势
Dec 22 Javascript
vue 实现全选全不选的示例代码
Mar 29 Javascript
手动用webpack搭建第一个ReactApp的示例
Apr 11 Javascript
vue指令做滚动加载和监听等
May 26 Javascript
vue单页应用的内存泄露定位和修复问题小结
Aug 02 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
The specified CGI application misbehaved by not returning a complete set of HTTP headers
2011/03/31 PHP
查找php配置文件php.ini所在路径的二种方法
2014/05/26 PHP
php 判断网页是否是utf8编码的方法
2014/06/06 PHP
PHP常用正则表达式集锦
2014/08/17 PHP
ThinkPHP模板中数组循环实例
2014/10/30 PHP
PHP 爬取网页的主要方法
2018/07/13 PHP
php 处理png图片白色背景色改为透明色的实例代码
2018/12/10 PHP
javascript 学习之旅 (1)
2009/02/05 Javascript
PNG背景在不同浏览器下的应用
2009/06/22 Javascript
jQuery 1.7.2中getAll方法的疑惑分析
2012/05/23 Javascript
jquery无缝向上滚动实现代码
2013/03/29 Javascript
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
2013/04/08 Javascript
js页面跳转的常用方法整理
2013/10/18 Javascript
javascript表单验证和Window详解
2014/12/11 Javascript
高效的jquery数字滚动特效
2015/12/17 Javascript
AngularJS中的Directive实现延迟加载
2016/01/25 Javascript
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
2017/12/09 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
2019/07/23 Javascript
对layer弹出框中icon数字参数的说明介绍
2019/09/04 Javascript
在Windows服务器下用Apache和mod_wsgi配置Python应用的教程
2015/05/06 Python
Python实现Youku视频批量下载功能
2017/03/14 Python
Python3.4实现从HTTP代理网站批量获取代理并筛选的方法示例
2017/09/26 Python
Python网络爬虫之爬取微博热搜
2019/04/18 Python
pytorch 实现在预训练模型的 input上增减通道
2020/01/06 Python
Python如何在windows环境安装pip及rarfile
2020/06/15 Python
Python机器学习工具scikit-learn的使用笔记
2021/01/28 Python
支票、地址标签、包装纸和慰问卡:Current Catalog
2018/01/30 全球购物
俄罗斯茶和咖啡网上商店:Tea.ru
2021/01/26 全球购物
广州盈通面试题
2015/12/05 面试题
建筑专业自荐信
2013/10/18 职场文书
机械设计专业应届生求职信
2013/11/21 职场文书
财务科科长岗位职责
2014/03/10 职场文书
护理人员的自我评价分享
2014/03/15 职场文书
计算机系统管理员求职信
2014/06/20 职场文书
党的群众路线教育实践活动个人对照检查材料(四风)
2014/11/05 职场文书
创业计划书之少年玩具店
2019/09/05 职场文书