увеличить изображение при наведении курсора на изображение внутри рамки - PullRequest
Новая
       36

увеличить изображение при наведении курсора на изображение внутри рамки

1 голос
/ 09 июля 2011

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

Спасибо!

1 Ответ

4 голосов
/ 20 апреля 2012

Самый простой способ. Поместите код где-нибудь в вашем файле 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 на все, что вам нужно. Наслаждайтесь.

...