Решение может быть и красивее, но дальше копать нет смысла с моей точки зрения.
Вот скрипт, он берет размер увеличения рандомально, но вы можете задавать их как хотите.
К ответу приложена картинка, которую я использовал.
Хм, только не обратил внимание на 4-й пункт - картинка должна постоянно увеличиваться и уменьшаться. Пропустил, впрочем дописывать пока не буду, если будут вопросы, напишите, можно будет доделать.
Доделал
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Image resizing</title>
</head>
<body>
<img id="husky" src="husky.jpg">
</body>
<script type="text/javascript">
window.addEventListener('load', go, false);
function go() {
var imgResizer = new ImageResizer();
// Измените размер на нужный.
// Если 0, то программа будет брать случайное число
imgResizer.toWidth = 0;
imgResizer.toHeight = 0;
imgResizer.init('husky');
}
function ImageResizer() {
this.toWidth = 0;
this.toHeight = 0;
this.animationSteps = 20;
this.animationDelay = 50;
var self = this;
var imgObj = null;
var animInterval = null, stepsCounter = 0;
var originalWidth = 0, originalHeight = 0;
var _toWidth = 0, _toHeight = 0;
var animationDirection = 'forward';
/**
* Initialisation
* @param id (String) - id of the image that will resized
*/
this.init = function(id) {
imgObj = document.getElementById( id );
if ( ! imgObj ) return false;
this.resizingAnim();
};
this.resizingAnim = function() {
if ( ! stepsCounter ) {
clearInterval( animInterval );
if ( animationDirection == 'forward' ) {
_toWidth = this.toWidth ? this.toWidth : Math.floor((Math.random() * imgObj.width + 300) + imgObj.width);
_toHeight = this.toHeight ? this.toHeight : Math.floor((Math.random() * imgObj.height + 300) + imgObj.height);
originalWidth = imgObj.width;
originalHeight = imgObj.height;
animationDirection = 'backward';
} else {
_toWidth = originalWidth;
_toHeight = originalHeight;
originalWidth = imgObj.width;
originalHeight = imgObj.height;
}
stepsCounter = self.animationSteps;
animInterval = setInterval( self.resizingAnim, self.animationDelay );
} else {
imgObj.width += ( _toWidth - originalWidth ) / self.animationSteps;
imgObj.height += ( _toHeight - originalHeight ) / self.animationSteps;
stepsCounter--;
}
}
}
</script>
</html>
|