изображение увеличивается при наведении с содержимым внутри блока div, прикрепленного к изображению

Мне было интересно, может ли кто-нибудь направить меня к созданию скрипта, в котором я могу увеличить изображение, наведя курсор мыши, но изображение не только будет увеличено, к нему также будет прикреплен div вокруг изображения, которое появляется когда вы наводите курсор

Спасибо!


image jquery hover mouseover image-enlarge
person hellomello    schedule 09.07.2011    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Самый простой способ. Поместите код в файл resizables.js.

/**
 * Copyright 2012, Val Kotlarov Hoffman.
 * Licensed under the GPL Version 2 license.
 * You may copy freely and distribute as long as this comment remains.
 **/

$(document).ready(function(){ 
    init_resizeables();
});

function init_resizeables() {

    $('img').hover(
        function() { 
            $(this).stop().animate({
                'width':'444px'
            },{
                duration:234
            }).css({
                'z-index':'999', 
                'position':'absolute'
            });
        },
        function() { 
            $(this).stop().animate({
                'width':'254px'
            },{
                duration:345
            }).css({
                'z-index':'1'
            });
        });
}

Первый с - это ширина увеличенного изображения. Вторая ширина — это обычный размер изображения. Просто включите это в свой html-файл, и все готово. Измените селектор img на то, что вам нужно. Наслаждаться.

person valk    schedule 20.04.2012