Задача по объекту images
Задача:
а)Вывести произвольное изображение на страницу. б)Запросить у пользователя два числа: максимальное значение ширины и высоты картинки. в)Затем с интервалом в 100мс изменять размер картинки по ширине и высоте на 1 px до тех пор, пока не получится максимальное значение заданное пользователем. г)После достижения максимума по ширине и высоте начать уменьшать картинку до исходного размера, потом снова увеличивать, снова уменьшать и так далее. У меня не получается выполнении второй функции: Вот код:
<html>
<head>
<title>JavaScript</title>
</head>
<body>
<img src = "aa.jpg" name = "i">
<br>
<script language="javascript">
var w = Number(prompt("Введите ширину"));
var h = Number(prompt("Введите длину"));
var k2 = h; var z2 = w;
var id1 = setInterval (fun, 10);
var k=0;var z=0;
var id = setInterval (fun1, 10,h,w);
function fun1 (h,w) {
if (k<h) {document.images.i.height =k++; }
if (z<w) {document.images.i.width =z++; }
}
function fun () {
if (k2>0) {document.images.i.height = k2--; }
if (z2>0) {document.images.i.width = z2--; }
}
</script>
</body>
</html>
|
Ara,
где начальные размеры картинки? |
Вложений: 1
Решение может быть и красивее, но дальше копать нет смысла с моей точки зрения.
Вот скрипт, он берет размер увеличения рандомально, но вы можете задавать их как хотите. К ответу приложена картинка, которую я использовал. Доделал
<!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>
|
artemdemo,
если уж делать пример, то запускаемый. [HTML run][/HTML] |
Цитата:
Проблема в том что ты не видишь результата выполнения второй функции в браузере так как задача учебная могу намекнуть что проблема в асинхронной работе событий(setInterval ) в JavaScript т.е. идущие подряд var id1 = setInterval (fun, 10); var id = setInterval (fun1, 10,h,w); работают не так как ты задумал ссылка на похожую тему |
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
|
| Часовой пояс GMT +3, время: 16:11. |