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

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

10 голосов
/ 19 мая 2009

Есть ли способ, используя 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>

Ответы [ 7 ]

14 голосов
/ 19 мая 2009

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

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

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

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

9 голосов
/ 19 мая 2009

Операции роста и сжатия легко выполняются с .animate: 

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

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

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

4 голосов
/ 17 июня 2009

Вы можете обернуть изображение в элемент div (или любой другой html-элемент, который, по вашему мнению, подходит, li и т. Д.), Если переполнение скрыто. Затем используйте jQuery .animate , чтобы увеличить этот 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-index для вашего div, чтобы он мог расти по макету и т. Д.

3 голосов
/ 08 июля 2011

Хотел опубликовать простое решение, которое я использую, основываясь на этом посте и информации из ответа Фокса на связанный вопрос.

Использование <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 являются глобальными, поэтому они будут доступны при отключении мыши.

1 голос
/ 03 августа 2013

- 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 голос
/ 20 мая 2009

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

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

Это можно сделать, установив его абсолютно и установив для его z-index большее значение. Тем не менее, это не всегда самое чистое решение ... поэтому я бы порекомендовал вам поиграться с «position :lative» в родительском элементе DOM и «position: absolute» в стиле изображения.

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

ура, мл

1 голос
/ 19 мая 2009

Разве вы не можете использовать jQuery animate для реализации этого? Немного повозившись, это должно быть совсем несложно.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...