Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.09.2012, 20:35
Новичок на форуме
Отправить личное сообщение для More916 Посмотреть профиль Найти все сообщения от More916
 
Регистрация: 22.08.2012
Сообщений: 6

Увеличение картинок при наведение
Я уже создавал тему с этим скриптом, но теперь я его доработал/развил(в меру моего малого опыта это и так можно назвать )
Собственно вот в чем проблема: скрипт я писал в jsFiddle, и там все работает, но когда и копирую весь код на хостинг или на компьютер, то он не работает, причем вообще javascript отказывается работать(хотя и библиотеку jQuery я везде подключал одинаковой версии)
Вот часть html кода:
<div id="wrapper"><div id="menu">
<img src="buttA1.png" class="zoom" alt="" />
<img src="buttB1.png" class="zoom" alt="" />
<img src="buttC1.png" class="zoom" alt="" />
<img src="buttD1.png" class="zoom" alt="" />
<img src="buttE1.png" class="zoom" alt="" />
</div></div>


Вот сам скрипт:
// Самое важное, это первая часть, отвечающая за расчет длины блока и его позиционирование по центру в зависимости от общего размера всех картинок, она и является моей доработкой
var menulen = 0;
$("#menu").children('img').each(function(indx, element){menulen +=  $(element).outerWidth(true);});
$("#menu").css({"margin-right":function(i,val){val = (menulen/2)*(-1); return val;}, "margin-top":"0"});
$("#menu").children('img').last().prevAll()
               .css("margin-right", function(i,val){
                        var lenth = $(this).width();
                        val = Math.round((200 -lenth)/2);
                        return val;});

//далее вторая часть, отвечающая за само изменение размеров картинок, ранее была только она, и она работала...

$(function(){
    $('.zoom').hover(function(){
            var name = $(this).attr("src");    
            $(this).stop().animate({width:"200px",height:"200px",left:"-40px",top:"-40px"}, 400);
            name = name.replace(/1/g, "2");
            $(this).attr("src",name);
        },
        function(){        
            var name = $(this).attr("src");    
            $(this).stop().animate({width:"100px",height:"100px",left:"0",top:"0"}, 400);
            name = name.replace(/2/g, "1");
            $(this).attr("src",name);
        });
});

Последний раз редактировалось More916, 01.09.2012 в 20:39.
Ответить с цитированием
  #2 (permalink)  
Старый 01.09.2012, 20:49
Аватар для Aetae
Любитель
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 5,611

$(function(){
var menulen = 0;
$("#menu").children('img').each(function(indx, element){menulen +=  $(element).outerWidth(true);});
$("#menu").css({"margin-right":function(i,val){val = (menulen/2)*(-1); return val;}, "margin-top":"0"});
$("#menu").children('img').last().prevAll()
               .css("margin-right", function(i,val){
                        var lenth = $(this).width();
                        val = Math.round((200 -lenth)/2);
                        return val;});
    $('.zoom').hover(function(){
            var name = $(this).attr("src");    
            $(this).stop().animate({width:"200px",height:"200px",left:"-40px",top:"-40px"}, 400);
            name = name.replace(/1/g, "2");
            $(this).attr("src",name);
        },
        function(){        
            var name = $(this).attr("src");    
            $(this).stop().animate({width:"100px",height:"100px",left:"0",top:"0"}, 400);
            name = name.replace(/2/g, "1");
            $(this).attr("src",name);
        });
});

Скорее всего.
__________________
29375, 35
Ответить с цитированием
  #3 (permalink)  
Старый 01.09.2012, 21:46
Новичок на форуме
Отправить личное сообщение для More916 Посмотреть профиль Найти все сообщения от More916
 
Регистрация: 22.08.2012
Сообщений: 6

Спасибо, вроде заработало.
Но! теперь появился вопрос по второй части скрипта:
$(function(){
	    $('.zoom').hover(function(){
	            var name = $(this).attr("src");   
	            $(this).stop().animate({width:"200px",height:"200px",left:"-40px",top:"-40px"}, 400);
	            name = name.replace(/1/g, "2");
	            $(this).attr("src",name);
	        },
	        function(){       
	            var name = $(this).attr("src");   
	            $(this).stop().animate({width:"100px",height:"100px",left:"0",top:"0"}, 400);
	            name = name.replace(/2/g, "1");
	            $(this).attr("src",name);
	        });
	});


Если спокойно наводить курсор и отводить только по одной картинки, то все нормально меняет размеры, а вот если провести по всем картинкам сразу, то они начинают "подвисать", значение их размеров зависает на промежуточных значениях...
Может все дело в stop() и я его как то неправильно применяю?
Ответить с цитированием
  #4 (permalink)  
Старый 01.09.2012, 22:01
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,220

More916,
Попробуйте так:
$(function(){
	    $('.zoom:not(.active)').live('mouseenter',function(){
	            $(this).addClass('active');
	            var name = $(this).attr("src");   
	            $(this).stop().animate({width:"200px",height:"200px",left:"-40px",top:"-40px"}, 400);
	            name = name.replace(/1/g, "2");
	            $(this).attr("src",name);
	        });
	        $('.zoom.active').live('mouseleave',function(){  
	            var name = $(this).attr("src");
	            $(this).stop().animate({width:"100px",height:"100px",left:"0",top:"0"},
	            "linear", function(){$(this).removeClass('active');}, 400);
	            name = name.replace(/2/g, "1");
	            $(this).attr("src",name);
	        });
	});

Последний раз редактировалось Deff, 01.09.2012 в 22:04.
Ответить с цитированием
  #5 (permalink)  
Старый 01.09.2012, 23:44
Новичок на форуме
Отправить личное сообщение для More916 Посмотреть профиль Найти все сообщения от More916
 
Регистрация: 22.08.2012
Сообщений: 6

Не.. так еще хуже... =( вообще только в одном направлении меняются...
Ответить с цитированием
  #6 (permalink)  
Старый 01.09.2012, 23:51
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,220

Сообщение от More916
Не.. так еще хуже... =( вообще только в одном направлении меняются...
More916,
Живая ссылка есть ?
Ответить с цитированием
  #7 (permalink)  
Старый 02.09.2012, 00:24
Новичок на форуме
Отправить личное сообщение для More916 Посмотреть профиль Найти все сообщения от More916
 
Регистрация: 22.08.2012
Сообщений: 6

http://jsfiddle.net/m/dfx/
Тут самая левая картинка все время в бок уходит, это просто я не доделал, а вот почему их размеры слетают если по всем сразу поводить курсором...
Ответить с цитированием
  #8 (permalink)  
Старый 02.09.2012, 00:35
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,220

More916,
Чот я попадаю на ввод акка
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
смена картинок при нажатии sdff Общие вопросы Javascript 15 08.02.2014 15:08
появление картинок при определенном разрешении экрана Rubik Events/DOM/Window 3 07.09.2011 14:37
увеличение картинки при наведении мышкой Sereban jQuery 10 31.08.2011 13:50
menu с выпадающими подменю при наведении и раздвижное при клике bugor Элементы интерфейса 3 04.10.2010 13:32
Событие при наведение на потомка ajon Events/DOM/Window 2 03.09.2010 09:17