Question

所以我需要在屏幕中央有一个图像，不断扩展然后缩小。我能够做到这一点，当你鼠标悬停在图像上它会扩展然后鼠标移出它会缩小。我现在已经开始扩展，但是无法弄清楚如何使循环发生，我也不确定它是否可以使其垂直和水平居中，我和我＃39;尝试取消了动画。谢谢你的帮助。

HTML

<!DOCTYPE html>
<html>
<title>Expanding Shrinking Image</title>
<head>
<script>
var tmp = 0;
var num = 0;
var img = null;
var timer = null;

function expand(it) {
  tmp = it.width;
  num = 0;
  img = it;
  timer = setTimeout("exp()",100);
}

function exp() {
  img.width = img.width * 1.1;
  num++
  if (num < 5)
    {timer = setTimeout("exp()",100);}
}

function shrink(it) {
  tmp = it.width;
  num = 5;
  img = it;
  timer = setTimeout("shk()",100);
}

function shk() {
  img.width = img.width/1.1;
  num--;
  if (num>0)
    {timer == setTimeout("shk()",100);}
}
</script>
</head>
<body>
<div id="centre" style="width:100%; text-align:center;">
<img id="image" src="http://image.tutorvista.com/cms/images/38/square1.jpg" onload="expand(this)">
</div>
</body>
</html>

Answer 1

完全基于您的`css`标记（并忽略标题），我很想提供仅限CSS3的答案：

演示：http://jsfiddle.net/abhitalks/QLfV7/1/

#yourImage {
    -webkit-animation: scaling 1s 4 ease;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
}
@-webkit-keyframes scaling {
    from {
        -webkit-transform: scale(0.2);
    }
    to {
        -webkit-transform: scale(1);
    }
}

Answer 2

我对您的代码进行了一些更改：

var tmp = 0;
var num = 0;
var img = null;
var timer = null;

function expand(it) {
tmp = it.width;
num = 0;
img = it;
timer = setTimeout("exp()",100);
}

function exp() {

img.width = img.width * 1.1;
num++
if (num < 5)
{timer = setTimeout("exp()",100);}

else{
timer = setTimeout("shk()",100);
}
}

function shk() {
img.width = img.width/1.1;
 num--;
if (num>0)
{timer == setTimeout("shk()",100);}
else
{timer = setTimeout("exp()",100);
}   
}

<强>样本： http://jsfiddle.net/nN9Xn/1/

Answer 3

将您的JavaScript代码替换为标记，并将其替换为以下代码：

<script>
var originalImgWidth = 0;
var img = null;

function expand(it) {
    originalImgWidth = it.width;
    img = it;
    exp();
}

function exp() {

    if(window.innerWidth > img.width * 1.1){ 
        img.width = img.width * 1.1;
        setTimeout("exp()",500);
    }
    else
        setTimeout("shrink()",500);


}
function shrink() {

    if(originalImgWidth < img.width){
        img.width = img.width / 1.1; 
        setTimeout("shrink()",500);
    }
    else
        setTimeout("exp()",500);


}
</script>

根据您的要求，它会正常工作。

这里还有一件事是它会扩展到你的窗口尺寸，然后它会缩小到原来的宽度。如果您需要基于no.of次数的逻辑来扩展和缩小，那么您已经更改了条件语句（例如 num＆gt; 5，num＆lt; 0 ）

您可以根据需要修改代码，例如图像应缩小到0宽度，或者图像应通过更改exp（）和shrink（）函数中的条件扩展到最大宽度。

使用javascript扩展/缩小图像？

3 个答案:

完全基于您的`css`标记（并忽略标题），我很想提供仅限CSS3的答案：

使用javascript扩展/缩小图像？

3 个答案:

完全基于您的css标记（并忽略标题），我很想提供仅限CSS3的答案：

完全基于您的`css`标记（并忽略标题），我很想提供仅限CSS3的答案：