Question

我想制作像这样page

的云

它应该显示在标题中的随机位置并通过随机方法移动我能做谁我使用了settimeout函数，但效果不佳

Answer 1

使用setInterval（抱歉我错了，假设delay（）有帮助）

尝试这样的事情（example here）。假设您的云是div：

    function moveMe(){
    var $this = $('#cloud');
    $this.each(function(){
           var ranX=Math.floor(Math.random()*11);
           var startX = $this.offset().left;
           var maxX = $this.parent().width(); 
           var newX = startX+ranX;

           //newX = (newX>maxX)? 0: newX;
           //alert("newX="+newX);
           $this.animate({
              left: newX+'px'

           }, "slow");
    });
}
$(function(){



   setInterval('moveMe()',1000);
});

请注意，hte标记应包含：

<div id="sky">
<div class="cloud" id="cloud"></div>
</div>

CSS：

#sky{
width:990px;
height:300px;
background:blue;
position:relative; /* important  */
}

.cloud{
position:absolute;  /* important  */
top:40px;
left: 0;
width:100px;
height:80px;
background: transparent url(images/cloud.png) top left no-repeat;
}

Answer 2

云在容器内似乎是可拖动的。当鼠标悬停时，另一个元素会被动画化，当你悬停父元素时，云本身会在父容器中左右滑动。

jQuery's draggable plugin。
$.hover();表示动画雨。
$.animate();用于滑动。

向我们展示您尝试过的内容，然后您会得到更详细的回复。

Answer 3

我不知道如何在jQuery中，但在简单的JS中，它是一个用Timer移动的图像。在Firefox上并使用FireBug，您可以看到云中的代码

我怎么能像这样制作jQuery动画？

3 个答案: