如何製作動畫的圖像成圓形股利

-1

我已經做到了這一點到現在https://jsfiddle.net/XqqtN/6146 如何製作動畫的圖像成圓形股利

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

現在我想讓它這樣有一個Circualar股利一些邊境就像在的jsfiddle鏈接

& 3朵花圖片應該已經在那裏了。

和一個花朵圖像生動或落在該圓形div內的某個隨機位置。

希望所以你明白了。

來源

2017-01-20 New Bie

您的jsfiddle鏈接無法使用。 –

不清楚的問題。請重新短語。 –

你正在尋找一個黑色的邊界圓，裏面有3個花朵圖像。隨着第四朵花的圖像，從屏幕上的任意位置移動到圈內的隨機位置？ – haxxxton

jquery應該是這樣的，希望這會有所幫助。點擊HERE找到小提琴

$(document).ready(function(){ 
    $("#coolDiv").animate({"right":"0px"}, "slow"); 
    $("#coolDiv").animate({"right":"493px"}, "slow"); 
    $("#coolDiv").animate({"top":"26px"}, "slow"); 
     });

來源

2017-01-20 07:30:49

我只是做了dumyy。試着用這個動畫，在這裏很好的工作

$(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>

來源

2017-01-20 08:53:14

如何製作動畫的圖像成圓形股利

回答

相關問題