如何将图像设置为循环分区

时间:2017-01-20 07:05:48

标签: javascript jquery html css

我做过这件事,直到https://jsfiddle.net/XqqtN/6146

var left = $('#coolDiv').offset().left;
$("#coolDiv").css({left:left}).animate({"left":"0px"}, "slow");

现在我想这样做 有一个带有边框的Circualar Div就像在jsfiddle链接中一样

&安培; 3花图像应该已经存在。

和一个花卉图像在该圆形div内的某个随机位置动画或掉落。

希望你明白了。

2 个答案:

答案 0 :(得分:0)

function accumulateKeyValues(obj){ var accumulated = []; for(var key in obj) accumulated = accumulated.concat(obj[key]); obj["all"] = accumulated; } var obj = { one:[ 'a', 'b', 'c' ], two:[ 'd', 'e', 'f', 'g' ] }; accumulateKeyValues(obj); console.log(obj);应该是这样的。希望这会有所帮助。 点击HERE查找小提琴

jquery

答案 1 :(得分:0)

我刚做了一个傻瓜。试试这个动画,在这里工作正常

$(document).ready(function(){
  

  for(i=0; i < 100; i++){
    var animate = $('#coolDiv');
    animate.animate({left:'98%'}, 1000);
    animate.animate({top:'75%'}), 1000;
    animate.animate({left:'0'}), 1000;
    animate.animate({top:'0'}), 1000;
  }
  
})
#coolDiv {
    position: absolute;
    top: 0;
    left:0;
    width:20px;
    height:20px;
}
.round {
  position:relative;
}
<div class="round" id="main" style="border:2px solid black;">
  <div style="margin:25px;">
    <img id="img_id" src="http://i.imgur.com/TLqV50g.jpg" width="20px" height="20px;" />
    <img src="http://i.imgur.com/TLqV50g.jpg" width="20px" height="20px;" />
    <img src="http://i.imgur.com/TLqV50g.jpg" width="20px" height="20px;" />
  </div>
  <div id="coolDiv">
  <img src="http://i.imgur.com/TLqV50g.jpg" width="20px" height="20px;" />
  </div>
</div>
    


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>