расширение / сжатие изображения с помощью JavaScript?

0

Поэтому мне нужно иметь изображение в центре экрана, постоянно расширяясь, а затем сокращаясь. Я смог сделать так, чтобы при наведении указателя мыши на изображение он будет расширяться, а затем по мыши будет сокращаться. Теперь я получил его, чтобы развернуть его после загрузки, но не могу понять, как сделать этот цикл, я также не уверен, что можно сделать его центрированным как по вертикали, так и по горизонтали, все, что я пробовал, отменило анимацию, Спасибо за помощь.

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>
  • 0
    Вы должны использовать setInterval для постоянного расширения и сжатия.
Теги:
image
animation

3 ответа

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);
    }
}
Поделиться
0

Я внес небольшие изменения в ваш код:

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/

Поделиться
0

Замените код 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> 5, num <0)

Вы можете изменить код в соответствии с требованием, например, изображение должно уменьшаться до 0 ширины, или изображение должно расширяться до максимальной ширины, изменяя условия в функциях exp() и shrink().

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню