使用JQuery / javascript创建动态图像：我做错了什么？ [英] Using JQuery / javascript to create a dynamic image: what am I doing wrong?
问题描述
请看看下面的代码:(我删除了所有文档类型等，以便阅读）。
please have a look at the following code: (I removed all doctypes etc for readability).
我猜这个代码很自我解释：JavaScript代码从下面的图像中检索高度和宽度，并创建两个缩小原始值80％的新变量（newHeight和newWidth）。加载文档时，应将这两个新变量（newHeight和newWidth）分配给图像的高度和宽度属性，但这不会发生。
I guess the code is pretty self-explaining: The javascript code retrieves the height and width from the image below and creates two new variables (newHeight and newWidth) which are shrunk by 80% of the original values. When the document loads, those two new variables (newHeight and newWidth) should be assigned to the height and width attribute of the image, but this doesn't happen.
可以有人帮我解决问题？
Can somebody help me out?
<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>
推荐答案
看起来像前两个答案错过了大括号 Math.Round
试试这个。
Looks like the first two answers missed an opening brace at Math.Round
Try this.
<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 用于根据屏幕调整大小。
Use screen.width for resizing according to screen.
$(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/
这篇关于使用JQuery / javascript创建动态图像：我做错了什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
