请看看下面的代码:(为了可读性,我删除了所有doctypes等)
我猜代码是相当自我解释:javascript代码检索的高度和宽度从下面的图像,并创建两个新的变量(newHeight和newWidth),这是原始值的80%缩小。当文档加载时,这两个新变量(newHeight和newWidth)应该分配给图像的高度和宽度属性,但这并没有发生。
有人能帮我一下吗?<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript" />
<script type="text/javascript">
var width = $("#fluidimage").width();
var height = $("#fluidimage").height();
var imageresize = 80;
var newHeight = Math.round(height/100)*imageresize);
var newWidth = Math.round(width/100)*imageresize);
</script>
</head>
<body onload="document.getElementById('#fluidimage').style.width=newWidth; document.getElementById('#fluidimage').style.height=newHeight;">
<img src="images/1.jpg" id="fluidimage" height="" width="" />
</body>
</html>
您需要等待整个文档加载(最后加载图片),以便图像将具有可检测的大小。
下面的代码应该可以工作了:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript" />
<script type="text/javascript">
$(window).load ( function () {
var width = $("#fluidimage").width();
var height = $("#fluidimage").height();
var imageresize = 80;
var newHeight = Math.round(height*imageresize/100);
var newWidth = Math.round(width*imageresize/100);
$("#fluidimage").width (newWidth).height (newHeight);
} );
</script>
</head>
<body>
<img src="images/1.jpg" id="fluidimage" />
</body>
</html>
注意,数学运算需要在舍入之前进行。
同样,jQuery允许你将JS"简化"为:
$(window).load ( function () {
function resizer (index, measurement) {
var imageresize = 80;
this.wCall = (typeof this.wCall == "null") ? true : this.wCall ^ true;
return this.wCall ? Math.round (measurement * imageresize / 100) : measurement;
}
$("#fluidimage").width (resizer).height (resizer);
} );
看起来前两个答案缺少了Math.Round
的左括号试试这个。
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript" />
<script type="text/javascript">
$(document).ready(function() {
var imageresize = 0.8;
var $image = $("#fluidimage");
$image.css({
"width": Math.round($image.width() * imageresize),
"height": Math.round($image.height() * imageresize)
});
});
</script>
</head>
<body>
<img id="fluidimage" src="images/1.jpg" />
</body>
</html>
工作演示:http://jsfiddle.net/naveen/58GBd/
使用screen.width
根据屏幕调整大小。
$(document).ready(function() {
var imageresize = 0.0;
var $image = $("#fluidimage");
switch (screen.width) {
case 1680:
imageresize = 0.5;
break;
case 1280:
imageresize = 0.4;
break;
case 1024:
imageresize = 0.3;
break;
default:
imageresize = 0.8;
break;
}
$image.css({
"width": Math.round($image.width() * imageresize),
"height": Math.round($image.height() * imageresize)
});
});
工作演示:http://jsfiddle.net/naveen/Xbe4v/
在计算宽度/高度之前,应该等待页面加载完成。试试这个
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript" />
<script type="text/javascript">
function() setImageDimensions{
var width = $("#fluidimage").width();
var height = $("#fluidimage").height();
var imageresize = 80;
document.getElementById('#fluidimage').style.width= Math.round(width/100)*imageresize);
document.getElementById('#fluidimage').style.height=Math.round(height/100)*imageresize;
}
</script>
</head>
<body onload="setImageDimenstions();">
<img src="images/1.jpg" id="fluidimage" height="" width="" />
</body>
</html>