<MyRusakov.ru />

React JS, Redux, ES2015 с Нуля до Гуру

React JS, Redux, ES2015 с Нуля до Гуру

Данный курс - это обширный курс по JavaScript и фреймворку React, который позволит Вам с нуля создавать мощные современные, динамические JavaScript-приложения.

Вы узнаете о тонкостях работы с "профессиональным" JavaScript, а так же узнаете о нововведениях в его новый стандарт ES2015, Вы узнаете, как организовать профессиональное окружение для FrontEnd, изучите профессиональный фреймворк - ReactJS.

А в практической части с полного нуля будет создано мощное и быстрое динамическое приложение, где Вы на практике познакомитесь, как создавать очень гибкую и расширяемую архитектуру, для разработке функционала любой сложности.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Форум сайта MyRusakov.ru

обьекты images
15.02.2013 19:55:07 обьекты images Сообщение #1
novi4ek

novi4ek

Новичок

Новичок

Дата регистрации:
30.01.2013 16:09:46

Сообщений: 7

Задание следующее: Необходимо чтобы изображение выезжало медленно по 1 пикселю в 100 милисекунд, а потом так же медленно скрывалось обратно,выезжает нормально, а заезжать обратно никак не хочет. Что посоветуете , уже все перепроовал.

И еще как вы думаете возможен ли такой вариант когда оно одновременно выезжает и заезжает, т.к при выезде в браузере наблюдается некая накладка двух изображений.И если да, то как это можно предотвратить или исправить? Может быть попробовать обьединить лве функции в одну? Заранее спасибо.

<html>
<head>

</head>

<body>
<img src = "images.jpeg" name = "i">
<script language = "javascript">

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--; }
}

var w = Number(prompt("Введите ширину");
var h = Number(prompt("Введите длину");

var k2 = h; var z2 = w;
var id1 = setInterval (fun, 100);

var k=0;var z=0;
var id = setInterval (fun1, 100,h,w);

</script>

</body>
</html>
Профиль Ответить
15.02.2013 20:07:05 обьекты images Сообщение #2
novi4ek

novi4ek

Новичок

Новичок

Дата регистрации:
30.01.2013 16:09:46

Сообщений: 7

Попробовал обьединить все равно ничего не получается(

<html>
<head>

</head>

<body>
<img src = "images.jpeg" name = "i">
<script language = "javascript">

function fun1 (h,w)
{
if (k2>0) {document.images.i.height = k2--; }
if (z2>0) {document.images.i.width = z2--; }

if (k<h) {document.images.i.height =k++; }
if (z<w) {document.images.i.width =z++; }
}

var w = Number(prompt("Введите ширину");
var h = Number(prompt("Введите длину");

var k2 = h; var z2 = w;
var k=0;var z=0;
var id = setInterval (fun1, 100,h,w);

</script>

</body>
</html>
Профиль Ответить
15.02.2013 21:04:48 обьекты images Сообщение #3
Admin

Admin

Администратор

Администратор

Дата регистрации:
27.05.2010 21:23:42

Сообщений: 3063

Используйте булевскую переменную. Когда она false, выезжайте, а когда true, заезжайте обратно. Когда достигнут максимум там или там, меняйте эту булевскую переменную на противоположное значение.
Профиль Ответить
15.02.2013 21:49:34 обьекты images Сообщение #4
novi4ek

novi4ek

Новичок

Новичок

Дата регистрации:
30.01.2013 16:09:46

Сообщений: 7

Если можно, то покажите пожайлуста это на примере, а то почему - то не получается.Опять же не выезжает обратно, может я что - то не так делаю, незнаю уже, просто до этого никогда не имел дела с этими булевскими переменными , имею только общее представление о них, а как их применить в данном примере незнаю, к сожалению(
Профиль Ответить
17.02.2013 00:11:20 обьекты images Сообщение #5
mischa.samolkaev

mischa.samolkaev

Продвинутый

Продвинутый

Дата регистрации:
12.07.2012 13:00:02

Сообщений: 74

novi4ok, я облегчу вашу задачу в 10 раз. Я написал удобную и компактную функцию на рекурсии (всего одну функцию):

function func(name,width,height,duration,type){
var img=document.images[name], heightOk=0, widthOk=0;
if(type==true){
if(img.height<height)img.height++;
else heightOk=1;if(img.width<width)
img.width++;else widthOk=1;if(heightOk+widthOk==2)
setTimeout(func,duration,name,width,height,duration,false);else setTimeout(func,duration,name,width,height,duration,true)}else if(type==false)
{if(img.height>0)img.height--;else heightOk=1;if(img.width>0)img.width--;else widthOk=1;if(heightOk+widthOk!=2)setTimeout(func,duration,name,width,height,duration,false)}}


Юзать так:
[code]
func('i',401,401,100,TRUE)
[code]
Профиль Ответить
19.08.2014 15:53:35 обьекты images Сообщение #6
artnovich

artnovich

Новичок

Новичок

Дата регистрации:
06.08.2014 20:13:45

Сообщений: 7

Вот доработанный вариант с булевской переменной

function func(name,width,height,duration,type){ 
var img=document.images.im, heightOk=0, widthOk=0;
if(type==true){ 
if ((h<height)&&(w<width)){
if(img.height<height)img.height++; 
else heightOk=1;
if(img.width<width) img.width++;
else widthOk=1;
}
if ((h>height)&&(w>width)){
if(img.height>height)img.height--;
else heightOk=1;
if(img.width>width)img.width--;
else widthOk=1;
}
if ((h>height)&&(w<width)){
if(img.height>height)img.height--; 
else heightOk=1;
if(img.width<width) img.width++;
else widthOk=1;
}
if ((h<height)&&(w>width)){
if(img.height<height)img.height++; 
else heightOk=1;
if(img.width>width) img.width--;
else widthOk=1;
}
if(heightOk+widthOk==2) setTimeout(func,duration,name,width,height,duration,false);
else setTimeout(func,duration,name,width,height,duration,true);
}
else if(type==false) {
if ((h<height)&&(w<width)){
if(img.height>h)img.height--;
else heightOk=1;
if(img.width>w)img.width--;
else widthOk=1;
}
if ((h>height)&&(w>width)){
if(img.height<h)img.height++;
else heightOk=1;
if(img.width<w)img.width++;
else widthOk=1;
}
if ((h>height)&&(w<width)){
if(img.height<h)img.height++;
else heightOk=1;
if(img.width>w)img.width--;
else widthOk=1;
}
if ((h<height)&&(w>width)){
if(img.height>h)img.height--;
else heightOk=1;
if(img.width<w)img.width++;
else widthOk=1;
}
if(heightOk+widthOk!=2) setTimeout(func,duration,name,width,height,duration,false);
else setTimeout(func,duration,name,width,height,duration,true);
}
}
var h = document.images.im.height;
var w = document.images.im.width;
var width = Number(prompt("Ведите максимальную ширину");
var height = Number(prompt("Ведите максимальную высоту");
var duration = Number(prompt("Ведите milliseconds");
func('i', width, height, duration, true);
Профиль Ответить
19.08.2014 16:35:55 обьекты images Сообщение #7
artnovich

artnovich

Новичок

Новичок

Дата регистрации:
06.08.2014 20:13:45

Сообщений: 7

Или вот способ вложенных интервалов

var width = Number(prompt("Ведите максимальную ширину");
var height = Number(prompt("Ведите максимальную высоту");
var duration = Number(prompt("Ведите milliseconds");
var w = document.images.im.width;
var h = document.images.im.height;
var img = document.images.im
var xmx = width;
var xma = width;
var ymx = height;
var yma = height;
var ymi = h;
var ymn = h;
var xmi = w;
var xmn = w;
if ((width > w) && (height > h)){
var id = setInterval(funid, duration);
}
if ((width < w) && (height < h)){
var di = setInterval(fundi, duration);
}
if ((width > w) && (height < h)){
var kn = setInterval(funkn, duration);
}
if ((width < w) && (height > h)){
var nk = setInterval(funnk, duration);
}
function funid(){
if ((xmi <= xma) || (ymi <= yma)){
if (xmi <= xma) img.width = xmi++;
if (ymi <= yma) img.height = ymi++;
}
else{
clearInterval(id);
var ide = setInterval(funide, duration);
}
function funide(){
if ((xmn <= xmx) || (ymn <= ymx)){
if (xmn <= xmx) img.width = xmx--;
if (ymn <= ymx) img.height = ymx--;
}
else{
xmi = xmn;
ymi = ymn;
xmx = xma;
ymx = yma;
clearInterval(ide);
id = setInterval(funid, duration);
}
}
}
function fundi(){
if ((xmi >= xma) || (ymi >= yma)){
if (xmi >= xma) img.width = xmi--;
if (ymi >= yma) img.height = ymi--;
}
else{
clearInterval(di);
var die = setInterval(fundie, duration);
}
function fundie(){
if ((xmn >= xmx) || (ymn >= ymx)){
if (xmn >= xmx) img.width = xmx++;
if (ymn >= ymx) img.height = ymx++;
}
else{
xmi = xmn;
ymi = ymn;
xmx = xma;
ymx = yma;
clearInterval(die);
di = setInterval(fundi, duration);
}
}
}
function funnk(){
if ((xmi >= xma) || (ymi <= yma)){
if (xmi >= xma) img.width = xmi--;
if (ymi <= yma) img.height = ymi++;
}
else{
clearInterval(nk);
var nke = setInterval(funnke, duration);
}
function funnke(){
if ((xmn >= xmx) || (ymn <= ymx)){
if (xmn >= xmx) img.width = xmx++;
if (ymn <= ymx) img.height = ymx--;
}
else{
xmi = xmn;
ymi = ymn;
xmx = xma;
ymx = yma;
clearInterval(nke);
nk = setInterval(funnk, duration);
}
}
}
function funkn(){
if ((xmi <= xma) || (ymi >= yma)){
if (xmi <= xma) img.width = xmi++;
if (ymi >= yma) img.height = ymi--;
}
else{
clearInterval(kn);
var kne = setInterval(funkne, duration);
}
function funkne(){
if ((xmn <= xmx) || (ymn >= ymx)){
if (xmn <= xmx) img.width = xmx--;
if (ymn >= ymx) img.height = ymx++;
}
else{
xmi = xmn;
ymi = ymn;
xmx = xma;
ymx = yma;
clearInterval(kne);
kn = setInterval(funkn, duration);
}
}
}
Профиль Ответить
17.12.2014 18:12:12 обьекты images Сообщение #8
Скриптор

Скриптор

Новичок

Новичок

Дата регистрации:
02.12.2014 06:26:59

Сообщений: 3

Объясните пожалуйста логику этих скриптов. То есть, в какой последовательности и почему эти скрипты исполняются. 
А также что касается heightOK и widthOK - не совсем понял что они означают. А также где там расшифровано - duration?
Профиль Ответить
19.12.2014 12:34:38 обьекты images Сообщение #9
artnovich

artnovich

Новичок

Новичок

Дата регистрации:
06.08.2014 20:13:45

Сообщений: 7

разбираются 4 возможных варианта: 1.две стороны картинки меньше заданных чисел 
2. две стороны больше заданных чисел 3. одна сторона больше вторая меньше 4. и наоборот. вот и весь алгоритм.
хайтОК и вайдОК это булевские переменные или коэфициент если хотите. как-то так в общем. конкретный вопрос – конкретный ответ
Профиль Ответить
25.12.2014 20:14:57 обьекты images Сообщение #10
Скриптор

Скриптор

Новичок

Новичок

Дата регистрации:
02.12.2014 06:26:59

Сообщений: 3

Спасибо
Профиль Ответить