基于jquery实现等比缩放图片
作者:bea
基于jquery的图片尺寸调整 resize.js 代码如下: $(window).bind("load", function() { // IMAGE RESIZE $('#product_list img').each(function() { var maxWidth = 120; var maxHeight = 120; var ratio = 0; var width = $(this).width(); var height =
基于jquery的图片尺寸调整
resize.js
代码如下:
$(window).bind("load", function() {
// IMAGE RESIZE
$('#product_list img').each(function() {
var maxWidth = 120;
var maxHeight = 120;
var ratio = 0;
var width = $(this).width();
var height = $(this).height();
if(width > maxWidth){
ratio = maxWidth / width;
$(this).css("width", maxWidth);
$(this).css("height", height * ratio);
height = height * ratio;
}
var width = $(this).width();
var height = $(this).height();
if(height > maxHeight){
ratio = maxHeight / height;
$(this).css("height", maxHeight);
$(this).css("width", width * ratio);
width = width * ratio;
}
});
//$("#contentpage img").show();
// IMAGE RESIZE
});
代码很简洁,使用起来也很简单,小伙伴们直接使用即可
有用 | 无用
resize.js
代码如下:
$(window).bind("load", function() {
// IMAGE RESIZE
$('#product_list img').each(function() {
var maxWidth = 120;
var maxHeight = 120;
var ratio = 0;
var width = $(this).width();
var height = $(this).height();
if(width > maxWidth){
ratio = maxWidth / width;
$(this).css("width", maxWidth);
$(this).css("height", height * ratio);
height = height * ratio;
}
var width = $(this).width();
var height = $(this).height();
if(height > maxHeight){
ratio = maxHeight / height;
$(this).css("height", maxHeight);
$(this).css("width", width * ratio);
width = width * ratio;
}
});
//$("#contentpage img").show();
// IMAGE RESIZE
});
代码很简洁,使用起来也很简单,小伙伴们直接使用即可
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- Javascript解析URL方法详解
- jQuery不兼容input的change事件问题解决过程
- Node.js中安全调用系统命令的方法(避免注入安全漏洞)
- jQuery前端框架easyui使用Dialog时bug处理
- Javascript实现获取窗口的大小和位置代码分享
- Javascript 中创建自定义对象的方法汇总
- dreamweaver 8实现Jquery自动提示
- jquery实现动态画圆
- javascript数组遍历for与for in区别详解
- 详谈nodejs异步编程
- c#+JQurey实现获取radio和checkbox的值
- express的中间件cookieParser详解
- express的中间件bodyParser详解
- express的中间件basicAuth详解
- 详解JS函数重载
- 如何让你的Lightbox支持滚轮缩放及Base64图片
- javascript常用代码段搜集
- 5种处理js跨域问题方法汇总
- 用js读、写、删除Cookie代码续篇