Справочник функций

Ваш аккаунт

Войти через: 
Забыли пароль?
Регистрация
Информацию о новых материалах можно получать и без регистрации:

Почтовая рассылка

Подписчиков: -1
Последний выпуск: 19.06.2015

Плавное увеличение картинок

446
04 декабря 2012 года
Meander
487 / / 04.09.2011
Когда останется в живых только один - самый лучший браузер?
Посоветуй, как исправить если не очень занят.
Если конкретно, то написал пару скриптов по теме:
Код:
var rtt;
var count = 0;
var steps = 80;
var shift = 5.0;
var interval = 15;
var stl,dal,h,H,w,W,l,t,k,timerMulti;

function ToStr(d){
  return (d + 'px');
}

function ToFloat(d){
  return window.parseFloat(d);
}

function Init(){
  stl = document.all["img"].style;
  dal = document.all["img"];
  stl.top  = ToStr(ToFloat(dal.offsetTop));
  stl.left = ToStr(ToFloat(dal.offsetLeft));
  stl.width  = ToStr(ToFloat(dal.offsetWidth));
  stl.height = ToStr(ToFloat(dal.offsetHeight));
}

function FirstHalf(){
  h   = ToFloat(stl.height);
  w   = ToFloat(stl.width);
  t   = ToFloat(stl.top);
  l   = ToFloat(stl.left);
  k   = w/h;
}

function SecondHalf(){
  H           = ToFloat(stl.height);
  W           = k*H;
  stl.width   = ToStr(W);
  stl.top  = ToStr(t-(H-h)/2.0);
  stl.left = ToStr(l-(W-w)/2.0);/* */
  count   += rtt;
}

function Over(){
  if(count < steps){
  FirstHalf();  
  stl.height  = ToStr(h+shift);
  SecondHalf();
  }
  if(count >= steps) window.clearInterval(timerMulti);
}

function Out(){
  if(count > 0){
  FirstHalf();
  stl.height  = ToStr(h-shift);
  SecondHalf();
  }
  if(count <= 0) window.clearInterval(timerMulti);
}

function over(){
rtt = 1;
Init();
window.clearInterval(timerMulti);
timerMulti = window.setInterval("Over();",interval);
}

function out(){
rtt = -1;
window.clearInterval(timerMulti);
timerMulti = window.setInterval("Out();",interval);
}
и еще проще:

Код:
var Iwidth  = 150,
    Iheight = 110,
    Itop    = 200,
    Ileft   = 500,
    Izoom   = 4;
var ID      = 'imgs';
 
function ToStr(d){
  return (d + 'px');
}

function over(){
  var W = Iwidth*Izoom, H = Iheight*Izoom;
  document.all[ID].style.width  = ToStr(W);
  document.all[ID].style.height = ToStr(H);
  document.all[ID].style.top  = ToStr(Itop  - (H - Iheight)/2);
  document.all[ID].style.left = ToStr(Ileft - (W -  Iwidth)/2);
}

function out(){
  document.all[ID].style.width  = ToStr(Iwidth);
  document.all[ID].style.height = ToStr(Iheight);
  document.all[ID].style.top  = ToStr(Itop);
  document.all[ID].style.left = ToStr(Ileft);
}
которые вызывал так:

 
Код:
<div id="imgs" onmouseover="over()" onmouseout="out()">
      <img class="exp" src="primer3.jpg">
      </div>
Первый код работает корректно, только, в на движке Crome, На IE - картинка смещается все выше и выше ... после каждого наведения курсора. И оба не работают в FF.
Еще хотел добавить, что общим местом в обоих вариантах является использование document.all[ID].style. , но чем тогда лучше его заменить? Использовать киты типа highslide-4.1.13 или JQueri не хочу из-за громоздкости. Интересный вариант, популярный у блогеров, но также как и профессиональные киты непонятен механизм их работы. Мне хочется понимать как работают мои скрипты. Если наведете на описание механизма работы этого, также будет гут.
86K
18 декабря 2012 года
SnowLeo
8 / / 26.11.2012
Цитата: Meander
Потихоньку начал разбираться. Проблема с кроссбраузерностью доступа к свойствам элементов и обработчиков событий. Вот тут хорошая статья. Когда доделаю выложу.


Может не мучиться и реализовать это на jQuery? Громоздкость тут не при чем, зато потом можно реализовать много всяких интересностей без изобретений велосипедов и "костылей" для браузеров.

446
04 декабря 2012 года
Meander
487 / / 04.09.2011
Потихоньку начал разбираться. Проблема с кроссбраузерностью доступа к свойствам элементов и обработчиков событий. Вот тут хорошая статья. Когда доделаю выложу.

Знаете кого-то, кто может ответить? Поделитесь с ним ссылкой.

Ваш ответ

Реклама на сайте | Обмен ссылками | Ссылки | Экспорт (RSS) | Контакты
Добавить статью | Добавить исходник | Добавить хостинг-провайдера | Добавить сайт в каталог