просто интересно, есть ли какой-либо плагин jquery, который, когда ваша мышь находится над изображением, это изображение будет увеличиваться в размере, и если ваша мышь отсутствует, размер будет уменьшаться все это как плавный переход. спасибо!jquery image resize переход onMouseOver
Вы можете попробовать Zoomer gallery plugin, или оставьте свой отзыв на основе this tutorial. Лично я бы пошел по учебному маршруту, так как он даст вам больше контроля над результатом (и вы узнаете что-то для загрузки;)
Если вам просто нужно одно изображение, вы можете использовать эффекты пользовательского интерфейса 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 effects
Там является JQuery взломать:
$(document).ready(function() {
$('#target_selector').mouseover(function(){
$(this).css('height':'value', 'width':'value')
$(this).mouseout(function(){
$('this').css('height':'value', 'width':'value')
});
});
});
Но вы можете использовать CSS псевдо-класс,: парить
#target_selector {
height: value;
width: value;
}
#target_selector:hover {
height: value;
width: value;
}
Либо может быть применяется к этому образцу HTML
<html>
<body>
<img id="target_selector" />
</body>
</html>
попробуйте этот http://justinfarmer.com/?p=14, и вот демо http://justinfarmer.com/tutorials/imageexpansion/imageexpansion.html. Я думаю, что это именно то, что вам нужно. – starikovs