Question

我的图片看起来像这样：而且我试图在我的幻灯片上为这辆卡车制作动画。早期我试图将我的幻灯片放映与this示例相结合，但它没有用。这个想法是当幻灯片转向＆＃34;免费送货＆＃34;滑动卡车将从右侧移动到左侧（现在放置的位置）。有什么办法可以吗？这张幻灯片我从here

进行了修改

<!DOCTYPE html>
<html lang="en">
<head>
  <title></title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="animation/car_anim.js"></script>
  <style>
  .carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
      width: 100%;
      margin: auto;
  }
  #Image_Car
{
      position:absolute;
       overflow: hidden;
    margin:60px 8px;
    left: -120px;
}

  </style>
</head>
<body>
<div class="container">
  <br>
  <div id="myCarousel" class="carousel slide" data-ride="carousel">


    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="img/hand.jpg" alt="Chania" width="977" height="230">
      </div>

      <div class="item">
        <img src="img/shipping.jpg" alt="Chania" width="977" height="230">
      </div>

      <div class="item">
        <img src="img/hand.jpg" alt="Flower" width="977" height="230">
      </div>

      <div class="item">
        <img src="img/hand.jpg" alt="Flower" width="977" height="230">
      </div>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>
<script>
/* Demo Scripts for Bootstrap Carousel and Animate.css article
* on SitePoint by Maria Antonietta Perna
*/
(function( $ ) {

    //Function to animate slider captions 
    function doAnimations( elems ) {
        //Cache the animationend event in a variable
        var animEndEv = 'webkitAnimationEnd animationend';

        elems.each(function () {
            var $this = $(this),
                $animationType = $this.data('animation');
            $this.addClass($animationType).one(animEndEv, function () {
                $this.removeClass($animationType);
            });
        });
    }

    //Variables on page load 
    var $myCarousel = $('#carousel-example-generic'),
        $firstAnimatingElems = $myCarousel.find('.item:first').find("[data-animation ^= 'animated']");


    //Animate captions in first slide on page load 
    doAnimations($firstAnimatingElems);

    //Pause carousel  
    $myCarousel.carousel('pause');


    //Other slides to be animated on carousel slide event 
    $myCarousel.on('slide.bs.carousel', function (e) {
        var $animatingElems = $(e.relatedTarget).find("[data-animation ^= 'animated']");
        doAnimations($animatingElems);
    });  

})(jQuery);
</script>
<script>


</script>
</body>
</html>

Answer 1

在https://daneden.github.io/animate.css/

查看animate.css

他们提供了大量现成的动画。只需在适当的时候将css类animated和slideInLeft添加到卡车（例如window.onload）

你也可以像这样预加载：

var img = new Image()
img.src = 'http://some-url/some-image'
img.addEventListener('load', function() {
    // add .animate and .slideInLeft css classes
    // or just use jQuery to register the event handler
})

希望我能激励你： - ）

我怎么能在幻灯片放映中为卡车制作动画？

1 个答案: