Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Плавное увеличение картинки 
:(
    Опции темы
TwiSteR
Дата 3.4.2006, 17:11 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Кибер красавчег
*


Профиль
Группа: Участник
Сообщений: 231
Регистрация: 15.6.2005
Где: World->Russia

Репутация: нет
Всего: 2
Приветствую уважаемые,
Подскажите как реализовать субж.
В джабаскрипте новичёк.
--------------------
PM MAIL WWW ICQ   Вверх
12345c
Дата 3.4.2006, 17:25 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Круглый
****


Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101
 В 2 словах не подскажешь.
Если нужен пример, укажите, какой (в виде примера на HTML) или поищите похожее на сайтах скриптов, а затем приходите с вопросом. 

Это сообщение отредактировал(а) 12345c - 3.3.2008, 16:53


--------------------
Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go
PM WWW   Вверх
GIK
Дата 3.4.2006, 17:26 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Добрый человек
**


Профиль
Группа: Участник
Сообщений: 985
Регистрация: 3.6.2005
Где: я только не небыв ал

Репутация: 6
Всего: 14
Цитата

Приветствую уважаемые,
Подскажите как реализовать субж.
В джабаскрипте новичёк.

Тысяча реализаций, вот одна из них.
Моя колбасная.
Внимание smile без пива не читать smile .
Код

<html>
 <head>
  <script type="text/javascript">
   <!--

   var topTime;
   var thisTop;
   var thisLeft;
   var thisWidth;
   var maxLeft;
   var thisID;




           var period;                        
     var NthisTop; 
     var NthisLeft; 
     var NthisWidth;    
          
    
    var NNNNNNNNNNNNNNNNNNNNNN=1;
 function f4(obj,t,l,w,ml,ID) { if(NNNNNNNNNNNNNNNNNNNNNN==1){NNNNNNNNNNNNNNNNNNNNNN=0; 
  thisTop=t; thisLeft=l; thisWidth=w; maxLeft=ml; thisID=ID;

 //Начальные значения Для установки по истечении трех секунд
 NthisTop=t; NthisLeft=l; NthisWidth=w;  
 
  topTime=window.setInterval("topStyle()",1);
  }
}
   function topStyle() {
if(thisTop<43) //До максимального Top значения! и одновременное увеличение width и left!!! 
{ document.getElementById(thisID).width=++thisWidth;
 document.getElementById(thisID).style.top=++thisTop; 
} else
  if(thisLeft<maxLeft) {
 document.getElementById(thisID).style.left=++thisLeft;
 document.getElementById(thisID).width=++thisWidth;  }
if(thisLeft==maxLeft) 
{ 
 period=window.setInterval("f1212()", 3000);  clearInterval(topTime);} //Остановка после дохождения до максимума.

} 

  
//***********************************44444444444444444555555555555555555555444444444444
  //Использую bool значения для вызова, два раза т.к. setInterval вызывает функции сразу :)
    var boolVizov=true;
   
                   function f1212(){
    if (boolVizov) {
    boolVizov=false;
  } else if (!boolVizov){   
   document.getElementById(thisID).style.left=NthisLeft;
   document.getElementById(thisID).width=NthisWidth; 
   document.getElementById(thisID).style.top=NthisTop;
    window.clearInterval(period); NNNNNNNNNNNNNNNNNNNNNN=1;  
}

}

                  
 
 //************************************************************************
 
   var topTime2;
   var thisTop2;
   var thisRight2;
   var thisWidth2;
   var maxRight2;
   var thisID2;
   
              
                    var period2;                        
     var NthisTop2; 
     var NthisRight2; 
     var NthisWidth2;      
  function f1(obj,t,r,w,mr,ID) { if(NNNNNNNNNNNNNNNNNNNNNN==1){NNNNNNNNNNNNNNNNNNNNNN=0; 
  thisTop2=t; thisRight2=r; thisWidth2=w; maxRight2=mr; thisID2=ID;

 //Начальные значения Для установки по истечении трех секунд
 NthisTop2=t; NthisRight2=r; NthisWidth2=w;  
 
  topTime2=window.setInterval("topStyle2()",1);
  }
}
   function topStyle2() {
if(thisTop2<43) //До максимального Top значения! и одновременное увеличение width и left!!! 
{ document.getElementById(thisID2).width=++thisWidth2;
  document.getElementById(thisID2).style.top=++thisTop2; 
} else
  if(thisRight2<maxRight2) {
 document.getElementById(thisID2).style.right=++thisRight2;
 document.getElementById(thisID2).width=++thisWidth2;  }
if(thisRight2==maxRight2) 
{ 
 period2=window.setInterval("f12122()", 3000);  clearInterval(topTime2);} //Остановка после дохождения до максимума.

} 

 //***********************************44444444444444444555555555555555555555444444444444
  //Использую bool значения для вызова, два раза т.к. setInterval вызывает функции сразу :)
    var boolVizov2=true;   
                   function f12122(){
    if (boolVizov2) {
    boolVizov2=false;
  } else {   
   document.getElementById(thisID2).style.right=NthisRight2;
   document.getElementById(thisID2).width=NthisWidth2; 
   document.getElementById(thisID2).style.top=NthisTop2;
    window.clearInterval(period2); NNNNNNNNNNNNNNNNNNNNNN=1;  //Как установим нужные значения Нам Этот таймер больше НЕ нужен  
  } 
}


        

//-->
 </script>
   </head>
 <body id="bod" bgcolor='#009983'>
   
   
 <img src="img\1.jpg" id="img1" width=120 style="position:absolute;top:21;left:30;" onMouseOver="f4(this,21,30,120,102,'img1')">
 <img src="img\2.jpg" id="img2" width=120 style="position:absolute;top:21;left:155;" onMouseOver="f4(this,21,155,120,201,'img2')">
 <img src="img\3.jpg" id="img3" width=120 style="position:absolute;top:21;left:280;" onMouseOver="f4(this,21,280,120,301,'img3')">
 <img src="img\4.jpg" id="img4" width=120 style="position:absolute;top:21;left:405;" onMouseOver="f4(this,21,405,120,501,'img4')">
 <img src="img\5.jpg" id="img5" width=120 style="position:absolute;top:21;right:100;" onMouseOver="f1(this,21,100,120,123,'img5')">
 <img src="img\6.jpg" id="img6" width=120 style="position:absolute;top:21;right:223;" onMouseOver="f1(this,21,223,120,333,'img6')">
 <img src="img\7.jpg" id="img7" width=120 style="position:absolute;top:21;right:345;" onMouseOver="f1(this,21,345,120,433,'img7')">

</body>
</html>



--------------------
Математика=>пиво=> програмирование, три вещи последовательны и совместимы !!!
Программирование - это не деятельнось! Программирование - это состояние души!
Бог - самый крутой программист.
PM MAIL ICQ   Вверх
GIK
Дата 3.4.2006, 17:45 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Добрый человек
**


Профиль
Группа: Участник
Сообщений: 985
Регистрация: 3.6.2005
Где: я только не небыв ал

Репутация: 6
Всего: 14
Блин, всетаки преборщил.
Щас что нибуть по проще с обяснениями организую smile


--------------------
Математика=>пиво=> програмирование, три вещи последовательны и совместимы !!!
Программирование - это не деятельнось! Программирование - это состояние души!
Бог - самый крутой программист.
PM MAIL ICQ   Вверх
GIK
Дата 3.4.2006, 18:04 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Добрый человек
**


Профиль
Группа: Участник
Сообщений: 985
Регистрация: 3.6.2005
Где: я только не небыв ал

Репутация: 6
Всего: 14
Код

<html>
<head>
  <script type="text/javascript">
   <!--
 var MuviTime; // Переменная для таймера
 var Width=120;
 var thisId;

 function GenerationMuvi(ID){ //Функция для запуска таймера
  thisId=ID; //передаем значение ID глобальной переменной, для того чтобы использовать ее в других функциях  
  MuviTime=window.setInterval("MuviImg1()", 100); //Вызываем функцию через каждые 1/10 сек.
 }
 function MuviImg1(){ 
 Width++;   //Инкрементируе Width
 document.getElementById(thisId).width=Width //Обращаемся к эллементу 
 if(Width==200)   //Как дойдем до 200, останавливаем текущие вызовы и вызываем другую функцию
    { 
       clearInterval(MuviTime); //Останавливаем таймер
       MuviTime=window.setInterval("MuviImg2()",100);
     }
}
  function MuviImg2(){ 
 Width--;   //Декрементируем  Width
 document.getElementById(thisId).width=Width //Обращаемся к эллементу 
 if(Width==120)   //Как доходим до 120, останавливаем текущие вызовы и вызываем другую функцию
    { 
       clearInterval(MuviTime); //Останавливаем таймер
       MuviTime=window.setInterval("MuviImg1()",1000);
     }
}             
//-->
 </script>
   </head>
 <body id="bod" bgcolor='#009983'>
   
   
<img src="img\1.jpg" id="img1" width=120 style="position:absolute;stop:50;left:50" onMouseOver="GenerationMuvi(this.id)">   
</body>
</html>



--------------------
Математика=>пиво=> програмирование, три вещи последовательны и совместимы !!!
Программирование - это не деятельнось! Программирование - это состояние души!
Бог - самый крутой программист.
PM MAIL ICQ   Вверх
TwiSteR
Дата 3.4.2006, 19:42 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Кибер красавчег
*


Профиль
Группа: Участник
Сообщений: 231
Регистрация: 15.6.2005
Где: World->Russia

Репутация: нет
Всего: 2
GIK,
Что-то не так работает
Вот сам посмотри
Тут
--------------------
PM MAIL WWW ICQ   Вверх
TwiSteR
Дата 3.4.2006, 20:06 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Кибер красавчег
*


Профиль
Группа: Участник
Сообщений: 231
Регистрация: 15.6.2005
Где: World->Russia

Репутация: нет
Всего: 2
Вот тут на форуме нашел такой код
Код


function resize(img,w,h,step) {
    dresize.target=img;
    dresize.width=img.offsetWidth;
    dresize.xstep=(w-img.offsetWidth)/step;
    dresize.height=img.offsetHeight;
    dresize.ystep=(w-img.offsetHeight)/step;
    dresize.step=step;
    dresize.timer=window.setInterval(dresize,10);
}
function dresize() {
    dresize.target.style.width=Math.round(dresize.width+=dresize.xstep);
    dresize.target.style.height=Math.round(dresize.height+=dresize.ystep);
    if(--dresize.step<=0) window.clearInterval(dresize.timer);
}


но он для уменьшения и что странно картинка вообще потом пропадает.[code=javascript]


Это сообщение отредактировал(а) TwiSteR - 3.4.2006, 20:07
--------------------
PM MAIL WWW ICQ   Вверх
TwiSteR
Дата 3.4.2006, 20:46 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Кибер красавчег
*


Профиль
Группа: Участник
Сообщений: 231
Регистрация: 15.6.2005
Где: World->Russia

Репутация: нет
Всего: 2
Вообщем решилось так
Код

function resize(img,w,h,step) {
    dresize.target=img;
    dresize.width=img.offsetWidth;
    dresize.xstep=(w+img.offsetWidth)/step;
    dresize.height=img.offsetHeight;
    dresize.ystep=(w+img.offsetHeight)/step;
    dresize.step=step;
    dresize.timer=window.setInterval(dresize,10);
}
function dresize() {
    dresize.target.style.width=Math.round(dresize.width+=dresize.xstep);
    dresize.target.style.height=Math.round(dresize.height+=dresize.ystep);
    if(--dresize.step<=55) window.clearInterval(dresize.timer);
}

НО вот как не позволить пользователю увеличить картинку больше чем в один раз.
Т.е. клик по картинке действовал бы один раз.
--------------------
PM MAIL WWW ICQ   Вверх
12345c
Дата 3.4.2006, 22:04 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Круглый
****


Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101
Какой код HTML для запуска?
PM WWW   Вверх
TwiSteR
Дата 3.4.2006, 22:05 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Кибер красавчег
*


Профиль
Группа: Участник
Сообщений: 231
Регистрация: 15.6.2005
Где: World->Russia

Репутация: нет
Всего: 2
Цитата(12345c @ 3.4.2006, 22:04 Найти цитируемый пост)
Какой код HTML для запуска?

Код

<td align="center" ><img src="images/mercedes.jpg" onClick="resize(this,1,1,100)" width=220 height=145></td>

--------------------
PM MAIL WWW ICQ   Вверх
12345c
Дата 4.4.2006, 00:18 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Круглый
****


Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101
Вот интересная модификация:
Код
<script>function resize(img,w,h,step) {
    //if(dresize.resized<0)return;
    if(dresize.step)return;
    dresize.target=img;
    dresize.width=img.offsetWidth;
    dresize.xstep=(w+img.offsetWidth*dresize.resized)/step;
    dresize.height=img.offsetHeight;
    dresize.ystep=(w+img.offsetHeight*dresize.resized)/step;
    dresize.step=step;
    dresize.timer=window.setInterval(dresize,10);
}
function dresize() {
    dresize.target.style.width=Math.round(dresize.width+=dresize.xstep);
    dresize.target.style.height=Math.round(dresize.height+=dresize.ystep);
if(--dresize.step<=55){window.clearInterval(dresize.timer);
    dresize.resized=-dresize.resized;}
}dresize.resized=1;</SCRIPT>

<td align="center" ><img src="snow.gif" onClick="resize(this,1,1,100)" width=220 height=145></td>
Чтобы не уменьшалась, надо раскомментировать 2-ю строчку.
3-я строчка - убирание бага на случай нажатия на картинку 2-3-4 раза.
PM WWW   Вверх
espltd
Дата 10.10.2012, 07:43 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 1
Регистрация: 10.10.2012

Репутация: нет
Всего: нет
Ребята! Всем добрый день! Помогите пожалуйста. Я в состоянии отчаяния уже. Дело в том, что я не достаточно знаю яваскрипт и поэтому не могу выполнить не которые задачи. Вчера пришел злой начальник и сказал увеличить картинки на сайте при нажатии на них. Много инфы по этому поводу почитал, и везде написано, что нужно 2 изображения - маленькое и большое. У нас интернет магазин и каталог товаров огромный. Я же не могу сейчас копии 100 тыс. товаров делать. Есть ли какой то другой выход. Допустим у каждого товара есть одна картинка среднего размера и при нажатии яваскрипт увеличивает её. Именно подобный способ, т.к. мне просто физически не сделать такой объем работы с 2-мя картинками. Я капец как запутался уже. Спасибо, заранее. Очень надеюсь на вас.   Вот кстати на этом интернет магазине мне необходимо реализовать данную задачу. ссылка удалена 
Администраторы! Ссылка не в рекламных целях. Правда! Очень нужна помощь!

Это сообщение отредактировал(а) Aliance - 10.10.2012, 10:19
PM MAIL   Вверх
Aliance
Дата 10.10.2012, 10:20 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137
espltd, поиск в гугле по слову lightbox


--------------------
• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript
PM MAIL WWW ICQ Skype   Вверх
  
 Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.0976 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.