使用javascript展开/缩小图像? [英] expanding/shrinking image using javascript?
问题描述
因此，我需要在屏幕中央放置一个图像，然后不断扩大然后缩小.我能够做到这一点，因此当您将鼠标悬停在图像上时，它会扩展，然后在鼠标悬停时，它会收缩.现在，加载后我将其扩展，但是无法弄清楚如何使该循环发生，我也不确定是否可以使其在垂直和水平方向上居中，我尝试过的所有操作都取消了动画.谢谢您的帮助.
So i need to have an image in the center of the screen, continuously expanding and then shrinking. I was able to make it so that when you mouseover on the image it will expand and then on mouse out it will shrink. I've now gotten it to expand once loaded but cannot figure out how to make the cycle happen, I'm also not sure if it's possible to make it centered vertically as well as horizontally, everything I've tried has cancelled out the animation. Thank you for help.
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>
推荐答案
纯粹基于您的 css 标记(并忽略标题)，我很想提供仅CSS3的答案:
演示: http://jsfiddle.net/abhitalks/QLfV7/1/
Based purely on your css tag (and ignoring the title), I am tempted to provide a CSS3 only answer:
Demo: 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);
}
}
这篇关于使用javascript展开/缩小图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
