Question

我试图编写一些可以拍摄图像的Javascript（目前，它只是500x400的测试图像说＆＃34;这是测试＆＃34;）并且每个都减小宽度时间间隔，给人一种旋转标志的印象;然后，当宽度达到零时，宽度再次增加，使其看起来像是再次打开。

我写了一些不整洁的代码，需要搞定;目前我只想努力工作，但是我工作有困难，任何人都可以帮忙吗？

<html>
<body>

<center>
<img src="sign.jpg" id="sign" width="500">
</center>

<script>
var decreasing=true;
var currentWidth=500;
var deltaWidth=5;
var myVar = setInterval(function(){ changeWidth() }, 500);

function changeWidth() 
{

if( decreasing == true )
{
currentWidth=-deltaWidth;
document.getElementById("sign").width = currentWidth;

if( currentWidth<=0)
{
    decreasing = false;
}
}
else
{
currentWidth=+deltaWidth;
document.getElementById("sign").width = currentWidth;

if( currentWidth>=500)
{
    decreasing = true;
}
}


}

</script>

</body>
</html>

Answer 1

您的操作员操作错误。 =-和=+应为-=和+=。

function changeWidth() 
{

    if( decreasing == true )
    {
        currentWidth -= deltaWidth;

        // ...
    }

}

Answer 2

我可以在您的代码中看到两个问题。

您的作业运算符是错误的。要增加值，您可以使用i = i + 1形式的代码，我将其缩短为i += 1。
除非您设置了高度，否则当您更改图片的height时，浏览器可能希望按比例调整width的大小。

以下代码有效：

var decreasing=true;
var currentWidth=500;
var deltaWidth=5;
var myVar = setInterval(function(){ changeWidth() }, 100);

function changeWidth() 
{

    document.getElementById("sign").height = 400;
    if( decreasing == true )
    {
        currentWidth-=deltaWidth;
        document.getElementById("sign").width = currentWidth;
        if( currentWidth<=0)
        {
            decreasing = false;
        }
    }
    else
    {
        currentWidth+=deltaWidth;
        document.getElementById("sign").width = currentWidth;

        if( currentWidth>=500)
        {
            decreasing = true;
        }
    }
}

<img id="sign" src="http://placehold.it/500x400" />

Answer 3

您的运营商是错误的方式。将=-更改为-=，将=+更改为+=。另外，请考虑在图像上设置高度并加快间隔。这是工作解决方案的fiddle。

Answer 4

尝试使用setAttribute-Function更改属性。你可以用CSS3 Animate做这样的事情。

Answer 5

执行：

document.getElementById("sign").style.width = currentWidth + "px"

然后使用正确的CSS，以便像添加

一样调整图像

max-width: 100%

到图像元素。

Answer 6

不是= - 但是 - =。同样的故事+ =。

currentWidth-=deltaWidth;

https://jsfiddle.net/xnbrad32/

setInterval以递增方式增加/减少图像宽度

6 个答案: