是否可以更改此代码以便滚出球。 但是:
HTML
<div id="balls">
<img src="http://i058.radikal.ru/1407/0d/33cc119c6686.png" id="ball" />
</div>
CSS
body {
background: #383838;
}
#balls {
position: absolute;
}
#balls img {
position: absolute;
}
#ball {
width: 90px;
height: 90px;
left: 170px;
top: 45px;
}
的jQuery
var diameter = $('#ball').height(),
perimeter = Math.PI * diameter;
var goLeft;
var times = 0;
var to = [600, 600];
function moveBalls() {
goLeft = !goLeft;
times++;
if (times > to.length) {
return false;
}
$('#balls').animate({
right: to[times]
}, {
duration: 2000,
step: rotateBall,
complete: moveBalls
});
}
moveBalls();
function rotateBall(distance) {
var degree = distance * 360 / perimeter;
$('#ball').css('transform', 'rotate(' + degree + 'deg)');
}
示例 Here
答案 0 :(得分:6)
<强> jsBin demo 强>
为了获得更好的结果,您应该为ball
提供3个元素:
像我一样使用CSS3过渡。
<div id="balls">
<div class="ball blue"> <!-- THIS ONE JUST MOVES RIGHT -->
<div><span>7</span></div> <!-- THIS ONE ROTATES -->
</div>
<!-- MORE BALLS HERE -->
</div>
遵循上述逻辑,CSS最终变得非常简单:
.ball{
position:absolute;
left:-100px;
width:90px;
height:90px;
background:#004E99;
border-radius:50%;
box-shadow: 20px 30px 30px -10px rgba(0,0,0,0.4);
}
.ball>div{
position:absolute;
width:100%;
height:100%;
border-radius:50%;
}
.ball>div>span{
position:absolute;
left:23px;
top:14px;
width:45px;
height:45px;
border-radius:50%;
text-align:center;
line-height:45px;
font-size:24px;
font-weight:bold;
background:#fff;
}
/* YOUR COLORS */
.ball.blue{ background: radial-gradient(circle at 20px 20px, #09f, #001);}
JS / JQ:
var $ball = $('#balls > div'),
diameter = $ball.height(),
perimeter = Math.PI * diameter,
n = $ball.length,
i = 0,
itv;
itv = setInterval(function(){
if(i>n)clearInterval(itv);
rotateBall( 500-(diameter*i) );
i++;
},2000);
function rotateBall(distance) {
var degree = distance * 360 / perimeter;
$ball.eq(i).css({
transition: "2s",
transform: 'translateX('+ distance +'px)'
}).find('div').css({
transition: "2s",
transform: 'rotate('+ degree +'deg)'
});
}