Изменение размера изображения до контрольной точки - PullRequest
Новая
       19

Изменение размера изображения до контрольной точки

1 голос
/ 05 марта 2011

Я пытаюсь анимировать слайд-шоу, где изображения уменьшаются.

Сейчас я использую: $('#item').animate({width:"75%"},1000);

Когда я запускаю это, изображение изменяет размеры, сохраняя при этом верхнюю и левую точки изображения статичными. Как я могу изменить размер изображения, сохраняя при этом верхнюю и правую точки статичными? (Таким образом, изображение будет расширяться вниз и влево)

Спасибо!

Ответы [ 3 ]

0 голосов
/ 05 марта 2011

Установите фиксированную ширину div, равную размеру исходного изображения, и установите align = "right".

например. при условии, что изображение 200x200: Также измените размер изображения, а не контейнера, или создайте другой контейнер внутри этого размера, чтобы изменить его размер.

<div style="width:200px;height:200px;">

<img src="img.jpg" align="right" />

</div>

0 голосов
/ 05 марта 2011

изменение размера влево довольно сложно, но не невозможно.Если у вас есть элемент обтекания, а изображение имеет float: right;, это будет довольно просто, как вы можете видеть в моем примере.Если у вас нет обертывающего элемента, вы должны динамически обернуть его вокруг него и заставить изображение плавать вправо.Убедитесь, что размер упаковочного элемента соответствует ширине. 

<html>
<head>
<title>Your Title</title>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script> 

<style type="text/css">

#outerbox {
  width: 800px;
}

#box {
  width: 100px;
  height: 100px;
  background: green;
  float: right;
}

</style>

<script type="text/javascript" language="javascript"> 
  $(document).ready(function () {

    $('#box').click(function() {
      $(this).animate({width: "75%"}, 1000);
    });


  });

</script>

</head >
<body>
  <div id="outerbox">
    <div id="box">
      hello
    </div>
  </div>

</body>
</html>
0 голосов
/ 05 марта 2011

Положите его в контейнер и поместите абсолютно ... 

#item {
   position: absolute;
   top: 0;
   right: 0;
}

jsFiddle .

...