2011-12-23 1 views
2

Буква кода действительно работает, только дело в том, что переход не очень гладок. Любая идея, как настроить код, чтобы сделать эффект более гладким? а также, когда изображение увеличивается, все содержимое ниже и рядом с изображением, похоже, отталкивается, чтобы освободить место для расширения, любая идея, как я могу остановить это, и просто сделать изображение совпадающим с содержимым вокруг него при расширении? Кроме того, вместо того, чтобы вставлять этот код для каждого изображения каждый раз, когда я загружаю новое изображение и хочу получить этот эффект, как сделать код javascript автоматически применимым к новому изображению вместо того, чтобы вручную применять к нему javascript каждый раз? Наконец, как я могу использовать это на видео/виджетах, а не только на изображениях? (Я использую Dreamweaver CS5).Проблемы с увеличением изображений при наведении курсора с помощью JQuery

$("img").each(function() { 
$.data(this, 'size', { width: $(this).width(), height: $(this).height() }); 
}).hover(function() { 
$(this).stop().animate({ height: $.data(this,'size').height*1.2, 
width: $.data(this,'size').width*1.2 }); 
}, function() { 
$(this).stop().animate({ height: $.data(this,'size').height, 
width: $.data(this,'size').width }); 
}); 

ответ

0

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

+0

Я привык настраивать CSS для этого, ничто, кажется, не работает с чуваком. –

+0

Окружающие элементы все еще, кажется, смещаются при увеличении –

+0

вы можете предоставить css? если элемент правильно позиционирован, он не должен влиять на окружающие элементы. –

0

Звучит так, как будто вы должны заглянуть в плагин jQuery Lightbox. Что касается конкретной проблемы с увеличенным изображением, толкающим ваш контент вокруг, его нужно удалить из потока документов (используя атрибут position) ... но это всего лишь верхушка айсберга. Есть много движущихся частей для задачи, которую вы пытаетесь достичь, поэтому использование существующего плагина javascript было бы лучше всего - ИМО, конечно.

Возможно, вы захотите проверить http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/, а также http://line25.com/articles/rounding-up-the-top-10-jquery-lightbox-scripts.