从不同方向向内滑动图像

Question

我想让第一张图片从左到右滑动。第二张图片从左向右滑动，第三张图片从下往上滑动。我设法用我在 Whosebug 上找到的答案从左向右滑动第一张图片。但是当我为其他图像修改脚本 & css 时，它们没有滑动。我对 javascript 不是很了解。

$(document).ready(function() {
  function animateImgs() {
    $('ul.slide1 li:not(.visible)').first().animate({
      'margin-right': '500px'
    }, 2000, function() {
      $(this).addClass('visible');
      animateImgs();
    });
  }
  animateImgs();
});

.content {
  position: relative;
  margin: 0 auto;
  top: 0;
  left: 0;
  width: 500px;
  height: 500px;
  border: 1px solid #000;
  overflow: hidden;
}

img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: absolute;
}

.img1 {
  max-width: 300px;
  max-height: 300px;
  z-index: 2;
}

.img2 {
  max-width: 260px;
  max-height: 260px;
  z-index: 3;
  left: 200px;
  top: 100px;
}

.img3 {
  max-width: 200px;
  max-height: 200px;
  z-index: 4;
  left: 65px;
  top: 235px;
}


/* -------------------------------------------------------------------- */

ul {
  padding: 0;
  margin: 0;
  overflow: hidden;
}

ul.slide1 li {
  float: right;
  margin: 0 10px 0 0;
  margin-right: 9999px;
  list-style-type: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="content">
  <ul class="slide1">
    <li>
      <img src="http://www.pngmart.com/files/4/Chrysanthemum-Transparent-Background.png" class="img1 slideLeft" />
    </li>
  </ul>
  <img src="http://www.estanciavitoria.com/en/images/sobre_planta.png" class="img2 slideRight" />
  <ul class="slide3">
    <li>
      <img src="https://s-media-cache-ak0.pinimg.com/originals/4d/09/e4/4d09e455070957363b2c0660a0d8cfef.png" class="img3 slideUp" />
    </li>
  </ul>
</div>

Answer 1

步骤：

用classslideContent
在容器内用 class slide
使用slideUp、slideDown、slideLeft或slideRight
指定data-margin滑动放置元素到容器中

Do not define following in CSS (instead use data-margin attribute in slide element):

margin-bottom for slideUp element

margin-top for slideDown element

margin-right for slideLeft element

margin-left for slideRight element

$(document).ready(function() {

  function animateImgs() {
    // Animation duration
    var duration = 200;

    // Get element reference needs to be shown
    var el = $('.slideContent .slide:not(.visible)').first();

    if (el.length === 0) {
      console.log('No more elements found');
      return;
    }

    // Read the margin value
    var marginValue = el.attr('data-margin');

    // Direction
    var marginDirection,
      animationProp = {};

    // Animate now
    if (el.hasClass('slideLeft')) {
      marginDirection = 'margin-right';
    } else if (el.hasClass('slideRight')) {
      marginDirection = 'margin-left';
    } else if (el.hasClass('slideUp')) {
      marginDirection = 'margin-bottom'
    } else if (el.hasClass('slideDown')) {
      marginDirection = 'margin-top'
    }

    if (typeof marginDirection === 'undefined') {
      // No valid animation direction defined
      console.log('Invalid animation direction');
      return;
    }

    animationProp[marginDirection] = marginValue;
    el.animate(animationProp, duration, function() {
      $(this).addClass('visible');
      animateImgs();
    });
  }

  animateImgs();

});

.slideContent {
  position: relative;
  margin: 0 auto;
  top: 0;
  left: 0;
  width: 500px;
  height: 500px;
  border: 1px solid #000;
  overflow: hidden;
}

.slideContent .slide {
  position: absolute;
}

.slideContent .slideLeft {
  right: -100%
}

.slideContent .slideRight {
  left: -100%
}

.slideContent .slideUp {
  bottom: -100%
}

img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.img1 {
  max-width: 300px;
  max-height: 300px;
}

.img2 {
  max-width: 260px;
  max-height: 260px;
  top: 100px;
}

.img3 {
  max-width: 200px;
  max-height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="slideContent">
  <img src="http://www.pngmart.com/files/4/Chrysanthemum-Transparent-Background.png" data-margin="500px" class="img1 slide slideLeft" />
  <img src="http://www.estanciavitoria.com/en/images/sobre_planta.png" data-margin="600px" class="img2 slide slideRight" />
  <img src="https://s-media-cache-ak0.pinimg.com/originals/4d/09/e4/4d09e455070957363b2c0660a0d8cfef.png" data-margin="600px" class="img3 slide slideUp" />
</div>

从不同方向向内滑动图像

Sliding images inward from different direction

javascript

jquery

slide

slidetoggle

jquery-animate