使用jquery或CSS3滚动动画

时间:2014-07-25 14:07:23

标签: javascript jquery html css

是否可以更改此代码以便滚出球。 但是:

  1. 表示球的数量(例如10)。
  2. 一旦推出一个球并停下来,然后推出下一个球 (并接近另一个)。
  3. 他们从右侧滚动到左侧。
  4. 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

1 个答案:

答案 0 :(得分:6)

<强> jsBin demo

enter image description here

为了获得更好的结果,您应该为ball提供3个元素:

  • 使用静态光源和阴影向右移动
  • 旋转内部DIV元素
  • 具有数字的SPAN - &gt;在旋转的DIV内。

像我一样使用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)'    
  });
}