<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>jquery图片缩放效果代码</title>
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>按比例自动缩放图片</title>
<script type="text/网页特效" src="jquery.js"></script><script language="javascript">
<!--
function drawimg(imgid,boxwidth,boxheight)
{
alert(boxwidth);
var imgwidth=$("#"+imgid).width();
var imgheight=$("#"+imgid).height();
//比较imgbox的长宽比与img的长宽比大小
if((boxwidth/boxheight)>=(imgwidth/imgheight))
{
//重新设置img的width和height
$("#"+imgid).width((boxheight*imgwidth)/imgheight);
$("#"+imgid).height(boxheight);
//让图片居中显示
var margin=(boxwidth-$("#"+imgid).width())/2;
$("#"+imgid).css教程("margin-left",margin);
}
else
{
//重新设置img的width和height
$("#"+imgid).width(boxwidth);
$("#"+imgid).height((boxwidth*imgheight)/imgwidth);
//让图片居中显示
var margin=(boxheight-$("#"+imgid).height())/2;
$("#"+imgid).css("margin-top",margin);
}
}//-->
</script>
</head>
<body>
<div id="imgbox" style="width:100px;height:125px;border:1px solid red;overflow:hidden">
<img id="img1" alt="" src="3620424_medium222.jpg" onload="drawimg(this.id,90,80);" />
</div>
</body>
</html></head>
<body>
</body>
</html>实例二
jquery.fn.autozoomloadimage = function(scaling, width, height, loadpic) {
if (loadpic == null) loadpic = "loading.gif";
return this.each(function() {
var t = $(this);
var src = $(this).attr("src");
var img = new image();
//alert("loading")
img.src = src;
//自动缩放图片
var autoscaling = function() {
if (scaling) {
if (img.width > 0 && img.height > 0) {
if (img.width / img.height >= width / height) {
if (img.width > width) {
t.width(width);
t.height((img.height * width) / img.width);
}
else {
t.width(img.width);
t.height(img.height);
}
}
else {
if (img.height > height) {
t.height(height);
t.width((img.width * height) / img.height);
}
else {
t.width(img.width);
t.height(img.height);
}
}
}
}
}
//处理ff下会自动读取缓存图片 jquery图片等比例缩放程序
if (img.complete) {
//alert("gettocache!");
autoscaling();
return;
}
$(this).attr("src", "");
var loading = $("<img alt="加载中" title="图片加载中" src="" + loadpic + "" />");
t.hide();
t.after(loading);
$(img).load(function() {
autoscaling();
loading.remove();
t.attr("src", this.src);
t.show();
//alert("finally!")
});
});
}
更多详细内容请查看：http://www.111cn.net/wy/jquery/34113.htm