Question

我目前有一个脚本功能，它可以拍摄图像并创建一个动画，允许它从屏幕的一侧传递到另一侧。但是我只想让动画穿过我的容器，这明显小于屏幕尺寸。如何更改代码以允许它执行此操作？

功能：

 <script>
        $(function() {
            var img = $("#bus"),
                    width = img.get(0).width,
                    screenWidth = $(window).width(),
                    duration = 10000;

            function animateBus() {
                img.css("left", -width)
                        .animate({
                            "left": screenWidth
                        }, duration, animateBus);
            }

            animateBus();
        });

    </script>

这也是我的容器：

div.container {
            text-align: left;
            width: 710px;
            margin: 0 auto;
            border: 12px solid black;
            border-radius: 10px;
        }

Answer 1

将screenWidth = $(window).width(),更改为screenWidth = $("div.container").width(),

Answer 2

以下是使用css3动画的示例...

＆＃13;

$(window).ready(function() {

  $('#animate').on('click', function() {
    $('.bus').addClass('animate');
  })
})

＆＃13;

.container {
  display: block;
  position: relative;
  width: 75%;
  height: 100px;
  border: 1px solid;
}
.bus {
  position: absolute;
  right: calc(100% - 100px);
  width: 100px;
  height: 100px;
}
.animate {
  -webkit-animation: slide 2s forwards;
  -webkit-animation-delay: 3s;
  animation: slide 2s forwards;
  animation-delay: 1s;
}
@-webkit-keyframes slide {
  100% {
    right: 0;
  }
}
@keyframes slide {
  100% {
    right: 0;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <img class="bus animate" src="http://lorempixel.com/400/200/">
</div>

＆＃13;

如何防止图像动画穿过我的整个屏幕，而不仅仅是我的容器？

2 个答案: