изменение размера изображения jquery onMouseOver - PullRequest
Новая
       14

изменение размера изображения jquery onMouseOver

0 голосов
/ 16 августа 2010

просто интересно, есть ли какой-нибудь плагин jquery, что когда ваша мышь находится над изображением, это изображение будет увеличиваться в размере, а если ваша мышь будет вне изображения, оно будет уменьшаться в размере, и все это будет плавным переходом.спасибо!

Ответы [ 3 ]

1 голос
/ 16 августа 2010

Если вам нужно только одно изображение, вы можете использовать эффекты пользовательского интерфейса jQuery. Обратите внимание, что это отдельно от базового jQuery - добавьте это ниже вашего вызова jQuery. 

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

Теперь, когда вы добавили ссылку на пользовательский интерфейс, мы можем использовать его библиотеку эффектов следующим образом:

сценарий: 

$(document).ready(function() {
    $('#imgid').hover(function(){$(this).effect("scale",{percent:200},500)}, function(){$(this).effect("scale",{percent:50},500)})
});

HTML: 

<img id="imgid" src="path/to/img.png" alt="(Vacation Slide)">

Просто помните, что когда вы масштабируете что-то, вам нужно понять, как уменьшить его, поскольку новый размер будет равен 100%. В моем коде мы удваиваем его (200%), а затем уменьшаем вдвое (50%), чтобы вернуться к оригиналу. Не стесняйтесь играть со временем перехода и любыми обратными вызовами, которые могут вам понадобиться, чтобы сделать его идеальным.

Ссылка на jQuery .hover () и эффекты jQuery UI

1 голос
/ 16 августа 2010

Вы можете попробовать плагин Zoomer Gallery или создать свой собственный на основе этого урока .Лично я бы пошел по пути обучения, так как он даст вам больше контроля над результатом (и вы научитесь что-то загружать;)

0 голосов
/ 27 апреля 2012

Есть взлом JQuery: 

$(document).ready(function() {
    $('#target_selector').mouseover(function(){
        $(this).css('height':'value', 'width':'value')
        $(this).mouseout(function(){
            $('this').css('height':'value', 'width':'value')
        });
    });
});

Но вы можете использовать псевдокласс CSS: hover 

#target_selector {
    height: value;
    width: value;
}
#target_selector:hover {
    height: value;
    width: value;
}

Либо можно применить к этому примеру HTML 

<html>

<body>

    <img id="target_selector" />

</body>

</html>
...