Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.09.2012, 13:00
Новичок на форуме
Отправить личное сообщение для binx Посмотреть профиль Найти все сообщения от binx
 
Регистрация: 15.09.2012
Сообщений: 2

Увеличение картинки при наведении
Добрый день, всем посетившим эту тему.
Хочу реализовать следующее: При наведении на картинку, она увеличивается в размерах, эффект как в highslide только при наведении.
Если делать анимацию jquery с увеличением размеров то соседние элементы раздвигаются чтобы дать ему место а хотелось бы чтобы увеличенное изображение вело себя как в highslide как бы выше страницы
Ответить с цитированием
  #2 (permalink)  
Старый 15.09.2012, 13:21
Аватар для Margarita
Аспирант
Отправить личное сообщение для Margarita Посмотреть профиль Найти все сообщения от Margarita
 
Регистрация: 14.09.2012
Сообщений: 83

position: absolute - не пробовали?
Ответить с цитированием
  #3 (permalink)  
Старый 16.09.2012, 21:29
Новичок на форуме
Отправить личное сообщение для binx Посмотреть профиль Найти все сообщения от binx
 
Регистрация: 15.09.2012
Сообщений: 2

пробобвал, но при этом соседние элементы сдвигаются на его место
Ответить с цитированием
  #4 (permalink)  
Старый 17.09.2012, 13:08
Аватар для Margarita
Аспирант
Отправить личное сообщение для Margarita Посмотреть профиль Найти все сообщения от Margarita
 
Регистрация: 14.09.2012
Сообщений: 83

http://jsfiddle.net/waGdZ/13/
Ответить с цитированием
  #5 (permalink)  
Старый 17.09.2012, 13:42
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function() {
        $("img").mouseenter(function() {
            var
                self = this,
                clone = self.__clone = self.__clone || $(self).clone(false);

            $(self).before(clone);

            clone.css({position: "absolute", "z-index": 1000}).stop().animate({
                width: "300px",
                marginLeft: "-100px"
            },{
                duration: 100
            }).mouseleave(function() {
                clone.stop().animate({
                    width: "100px",
                    marginLeft: "0px"
                }, {
                    duration: 100,
                    complete: function() {
                        $(this).remove();
                        self.__clone = null;
                    }
                });
            });
        });
    });
</script>
<style>
img {
    width: 100px;
    height: auto;
    margin: 0 5px;
}
li {
    position: relative;
    float: left;
    display: block;
    width: 110px;
}
</style>
<ul>    
<li><img src="http://copypast.ru/uploads/posts/1218050576_image00001.jpg" />&nbsp;</li>
<li><img src="http://ru.fishki.net/picsw/042009/30/bonus/kitty/004_kitty.jpg" />&nbsp;</li>
<li><img src="http://ru.fishki.net/picsw/042009/30/bonus/kitty/013_kitty.jpg" id="picture"/>&nbsp;</li>
<li><img src="http://doseng.org/uploads/posts/2008-09/1221463151_cat_01.jpg" />&nbsp;</li>
<li><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcR-VVYIs6o4-qAl2F-Q6yaQxYf1yaNd3HpRXWBYarHWHmo5gnxg_A" />&nbsp;</li>
<li><img src="http://votrube.ru/uploads/posts/2009-05/1241301872_kotjatki-%28www.votrube.ru%291.jpg" />&nbsp;</li>
</ul>
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием
  #6 (permalink)  
Старый 17.09.2012, 15:47
Аватар для Margarita
Аспирант
Отправить личное сообщение для Margarita Посмотреть профиль Найти все сообщения от Margarita
 
Регистрация: 14.09.2012
Сообщений: 83

to devote:

1) а зачем столько лишнего кода? чем мой вариант плох?
2) в вашем варианте - если быстро проводить мышкой над картинками - есть эффект "залипания"
Ответить с цитированием
  #7 (permalink)  
Старый 17.09.2012, 16:15
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Сообщение от Margarita
1) а зачем столько лишнего кода? чем мой вариант плох?
что бы было)))

Сообщение от Margarita
2) в вашем варианте - если быстро проводить мышкой над картинками - есть эффект "залипания"
А кто сказал что он претендует на идеал?
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изменение цвета заливки у SVG картинки при наведении мыши? akkond Общие вопросы Javascript 2 15.04.2014 13:04
Смена картинок при наведении utb jQuery 0 06.04.2012 08:58
увеличение картинки при нажатии alex964 Элементы интерфейса 1 13.03.2011 21:54
Как сделать, чтобы при наведении на кнопку справа от нее появлялись текстовые ссылки? Tass Общие вопросы Javascript 7 17.02.2011 09:06
Помогите создать скрипт замены картинок при наведении курсора. SantaS Я не знаю javascript 3 05.06.2009 12:59