Есть ли способ увеличить / уменьшить изображение при наведении с помощью Jquery?

есть ли способ, используя Jquery, чтобы расти, а затем сжимать изображение (с анимацией, чтобы оно выглядело гладким) при зависании, не влияя на макет слишком сильно (я предполагаю, что заполнение должно будет сжиматься, а затем расти).

немного повозившись, я, наконец, придумал решение, спасибо всем, кто помог.

<html>
<head>
<style type="text/css"> 
    .growImage {position:relative;width:80%;left:15px;top:15px}
    .growDiv { left: 100px; top: 100px;width:150px;height:150px;position:relative }
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

</head>
<body> 
<div class="growDiv"> 
      <img class="growImage" src="image.jpg" alt="my image"> 
</div>

<script type="text/javascript">

$(document).ready(function(){

    $('.growImage').mouseover(function(){
      //moving the div left a bit is completely optional
      //but should have the effect of growing the image from the middle.
      $(this).stop().animate({"width": "100%","left":"0px","top":"0px"}, 400,'swing');
    }).mouseout(function(){ 
      $(this).stop().animate({"width": "80%","left":"15px","top":"15px"}, 200,'swing');
    });;
});
</script>
</body></html>
9
jquery

7 ответов

Если у вас есть изображение, расположенное абсолютно к документу в CSS, остальная часть макета страницы не должна изменяться при анимации изображения.

вы должны иметь возможность использовать функцию animate() jQuery. Код будет выглядеть примерно так:

$("#yourImage").hover(
    function(){$(this).animate({width: 400px, height:400px}, 1000);},        
    function(){$(this).animate({width: 200px, height:200px}, 1000);}
);

этот пример увеличит изображение с id=yourImage до 400px в ширину и высоту при наведении мыши, и вернет его к 200px в ширину и высоту, когда наведение заканчивается. Тем не менее, ваша проблема заключается больше в HTML / CSS, чем это в jQuery.

13

растут и сжимают деятельности легки с .animate:

$("#imgId").click(function(){
  $(this).animate({ 
    width: newWidth,
    height: newHeight
  }, 3000 );
});

проблема в том, как это сделать без изменения макета страницы. Один из способов сделать это-с копией, которая расположена абсолютно над контентом. Другой может быть абсолютно позиционировать изображение внутри относительного фиксированного размера div-хотя IE может иметь проблемы с этим.

вот существующая библиотека, которая, похоже, делает то, что вы просите http://justinfarmer.com/?p=14

9

вы можете обернуть изображение в div (или любой html-элемент, который вы считаете подходящим, li и т. д.) с его переполнением, установленным в hidden. Затем использовать jQuery .одушевить чтобы вырастить этот div, как вам нравится.

Так, например,HTML-код может быть

<div class="grower">
  <img src="myimg.jpg" width="300" height="300" alt="my image">
</div>

затем ваш в CSS будет выглядеть как

.grower {width:250px;height:250px;overflow:hidden;position:relative;}

таким образом, ваше изображение по существу обрезается div, который вы можете вырастить на любом событии, чтобы выявить полный размер изображения с помощью jQuery

$('.grower').mouseover(function(){
  //moving the div left a bit is completely optional
  //but should have the effect of growing the image from the middle.
  $(this).stop().animate({"width": "300px","left":"-25px"}, 200,'easeInQuint');
}).mouseout(function(){ 
  $(this).stop().animate({"width": "250px","left":"0px"}, 200,'easeInQuint');
});;

NB: вы можете добавить дополнительный css в свой js, например, увеличенный Z-индекс к вашему div, чтобы он мог расти над макетом и т. д.

4

хотел опубликовать простое решение, которое я использую на основе этого сообщения и информации от Лиса к смежному вопросу.

С помощью <img> такой: <img style="position: absolute;" class="resize" />

вы можете сделать что-то похожее на то, что ниже. Он будет принимать текущую ширину изображения+высоту, сделать его в 3 раза больше при наведении (current * 3), а затем вернуть его на мышь.

var current_h = null;
var current_w = null;

$('.resize').hover(
    function(){
        current_h = $(this, 'img')[0].height;
        current_w = $(this, 'img')[0].width;
        $(this).animate({width: (current_w * 3), height: (current_h * 3)}, 300);
    },
    function(){
        $(this).animate({width: current_w + 'px', height: current_h + 'px'}, 300);
    }
);

на current_X переменные являются глобальными, поэтому они будут доступны в mouse-out действие.

2

не можете ли вы использовать jQuery анимация реализовать это? Немного повозиться-и все будет в порядке.

1

Если вы действительно имеете в виду" не влияя на макет", вам нужно больше сосредоточиться на CSS, чем на javascript.

JavaScript involoved уже размещен здесь... но чтобы убедиться, что ваш макет не испорчен, вам понадобится удалить изображение из потока макета.

Это можно сделать, расположив его абсолютно и установив его Z-индекс на большее значение. Однако это не всегда самое чистое решение... так что я бы рекомендуем вам поиграть с "position: relative" в родительском элементе DOM и" position:absolute " в стиле изображения.

взаимодействие относительного и абсолютного довольно интересно. Вы должны Google его.

ура, jrh

1

-- HTML

<div class="container">
  <img id="yourImg" src="myimg.jpg">
</div>

-- JS

$( ".container" ).toggle({ effect: "scale", persent: 80 });

--больше информации
http://api.jqueryui.com/scale-effect/

1