使用JQuery / javascript创建一个动态图像:我做错了什么

Using JQuery / javascript to create a dynamic image: what am I doing wrong?

本文关键字：图像 动态 什么 错了 一个 javascript JQuery 创建 使用      更新时间：2023-09-26

请看看下面的代码:(为了可读性，我删除了所有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>
相关文章：