本文为大家分享了四个jquery图片常见操作,供大家参考,具体内容如下
1、关于图片大小的重绘,你可以在服务端来实现,也可以通过JQuery在客户端实现。
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
});
2、jQuery获取图片实际尺寸的方法
function getImageWidth(url,callback){
var img = new Image();
img.src = url;
var img = new Image();
img.src = url;
// 如果图片被缓存,则直接返回缓存数据
if(img.complete){
callback(img.width,img.height);
}else{
// 完全加载完毕的事件
img.onload = function(){
callback(img.width,img.height);
}
}
}
3、jquery 自动调整图片大小
maxWidth){
ratio = maxWidth / width; // 计算缩放比例
$(this).css("width",maxWidth); // 设定实际显示宽度
height = height * ratio; // 计算等比例缩放后的高度
$(this).css("height",height); // 设定等比例缩放后的高度
} // 检查图片是否超高
if(height > maxHeight){
ratio = maxHeight / height; // 计算缩放比例
$(this).css("height",maxHeight); // 设定实际显示高度
width = width * ratio; // 计算等比例缩放后的高度
$(this).css("width",width); // 设定等比例缩放后的高度
}});
});
4、使用jQuery对图片进行大小缩放
if(width > maxWidth){
ratio = maxWidth / width;
$(this).css("width",height * ratio);
height = height * ratio;
}
var width = $(this).width();
var height = $(this).height();
if(height > maxHeight){
ratio = maxHeight / height;
$(this).css("height",width * ratio);
width = width * ratio;
}
});
//$("#contentpage img").show();
// IMAGE RESIZE
});