08.11.2014, 00:33
|
|
Новичок на форуме
|
|
Регистрация: 08.11.2014
Сообщений: 9
|
|
|
Задача по объекту 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>
|
|
08.11.2014, 00:56
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
Ara,
где начальные размеры картинки?
|
|
08.11.2014, 14:21
|
|
Интересующийся
|
|
Регистрация: 07.11.2014
Сообщений: 11
|
|
Решение может быть и красивее, но дальше копать нет смысла с моей точки зрения.
Вот скрипт, он берет размер увеличения рандомально, но вы можете задавать их как хотите.
К ответу приложена картинка, которую я использовал.
Хм, только не обратил внимание на 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>
Последний раз редактировалось artemdemo, 08.11.2014 в 14:32.
|
|
08.11.2014, 14:50
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
artemdemo,
если уж делать пример, то запускаемый.
[HTML run][/HTML]
|
|
08.11.2014, 15:03
|
 |
Профессор
|
|
Регистрация: 07.03.2011
Сообщений: 1,138
|
|
|
Сообщение от Ara
|
У меня не получается выполнении второй функции:
|
Неверно (функция выполняется и работает как и задумывалось)
Проблема в том что ты не видишь результата выполнения второй функции в браузере
так как задача учебная могу намекнуть что проблема в асинхронной работе событий(setInterval ) в JavaScript
т.е. идущие подряд
var id1 = setInterval (fun, 10);
var id = setInterval (fun1, 10,h,w);
работают не так как ты задумал
ссылка на похожую тему
Последний раз редактировалось MallSerg, 08.11.2014 в 15:05.
Причина: Умная мысля приходит опосля xD
|
|
08.11.2014, 16:09
|
|
Интересующийся
|
|
Регистрация: 07.11.2014
Сообщений: 11
|
|
Сообщение от рони
|
artemdemo,
если уж делать пример, то запускаемый.
[HTML run][/HTML]
|
А что не запускается в моем примере? |
|
08.11.2014, 16:55
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
Сообщение от artemdemo
|
|
А что не запускается в моем примере?
|
кнопы run нету. |
|
08.11.2014, 18:14
|
|
Новичок на форуме
|
|
Регистрация: 08.11.2014
Сообщений: 9
|
|
|
Сообщение от рони
|
Ara,
где начальные размеры картинки?
|
просто любую картинку использовать не зависимо от того какого она размера. |
|
08.11.2014, 18:18
|
|
Новичок на форуме
|
|
Регистрация: 08.11.2014
Сообщений: 9
|
|
|
Сообщение от artemdemo
|
Решение может быть и красивее, но дальше копать нет смысла с моей точки зрения.
Вот скрипт, он берет размер увеличения рандомально, но вы можете задавать их как хотите.
К ответу приложена картинка, которую я использовал.
Хм, только не обратил внимание на 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>
|
все бы хорошо, но вы использовали некоторые свойства с которыми я еще не знаком. а задача как раз была сделать именно с теми то знаком. Поэтому я и написал код который у меня получился)
|
|
08.11.2014, 18:21
|
|
Новичок на форуме
|
|
Регистрация: 08.11.2014
Сообщений: 9
|
|
|
Сообщение от MallSerg
|
Неверно (функция выполняется и работает как и задумывалось)
Проблема в том что ты не видишь результата выполнения второй функции в браузере
так как задача учебная могу намекнуть что проблема в асинхронной работе событий(setInterval ) в JavaScript
т.е. идущие подряд
var id1 = setInterval (fun, 10);
var id = setInterval (fun1, 10,h,w);
работают не так как ты задумал
ссылка на похожую тему
|
Спасибо конечно. Но в том и проблема, знаю что нужно использовать булевскую переменные true и false но не знаю как |
|
|
|
