Плавное увеличение картинок
Когда останется в живых только один - самый лучший браузер?
Посоветуй, как исправить если не очень занят.
Если конкретно, то написал пару скриптов по теме:
и еще проще:
которые вызывал так:
Первый код работает корректно, только, в на движке Crome, На IE - картинка смещается все выше и выше ... после каждого наведения курсора. И оба не работают в FF.
Еще хотел добавить, что общим местом в обоих вариантах является использование document.all[ID].style. , но чем тогда лучше его заменить? Использовать киты типа highslide-4.1.13 или JQueri не хочу из-за громоздкости. Интересный вариант, популярный у блогеров, но также как и профессиональные киты непонятен механизм их работы. Мне хочется понимать как работают мои скрипты. Если наведете на описание механизма работы этого, также будет гут.
Посоветуй, как исправить если не очень занят.
Если конкретно, то написал пару скриптов по теме:
Код:
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 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);
}
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>
<img class="exp" src="primer3.jpg">
</div>
Еще хотел добавить, что общим местом в обоих вариантах является использование document.all[ID].style. , но чем тогда лучше его заменить? Использовать киты типа highslide-4.1.13 или JQueri не хочу из-за громоздкости. Интересный вариант, популярный у блогеров, но также как и профессиональные киты непонятен механизм их работы. Мне хочется понимать как работают мои скрипты. Если наведете на описание механизма работы этого, также будет гут.
Цитата: Meander
Потихоньку начал разбираться. Проблема с кроссбраузерностью доступа к свойствам элементов и обработчиков событий. Вот тут хорошая статья. Когда доделаю выложу.
Может не мучиться и реализовать это на jQuery? Громоздкость тут не при чем, зато потом можно реализовать много всяких интересностей без изобретений велосипедов и "костылей" для браузеров.
Потихоньку начал разбираться. Проблема с кроссбраузерностью доступа к свойствам элементов и обработчиков событий. Вот тут хорошая статья. Когда доделаю выложу.