Question

我的div框包含我要在页面加载后滚动的圆形图像（如滚动球在地板上）。滚动后我想将图像放在框的完美中心。

的CSS：

#box{width:900px;height:150px;position:relative;background:red;overflow:hidden;}

    .ball{width:150px;height:150px;position;absolute;bottom:0;right:-150px;background:green;}

    .ball img{display:block;width:100%;height:100%;border-radius:50%;}

HTML：

<div id="box">
       <div class="ball><img src="http://blog.wiziq.com/wp-content/uploads/2013/11/5-150x150.png"</div>
 </div>

帮助我使用css3 / jquery滚动球效果

我的编辑：

的CSS：

.ball{
    position:absolute;width:150px;height:150px;right:-150px;
        -moz-transition:all 5s ease;
    -webkit-transition:all 5s ease;
    -o-transition:all 5s ease;
    -ms-transition:all 5s ease;
    transition:all 5s ease;
}

.rotate{-moz-transform:rotate(-940deg);
    -webkit-transform:rotate(-940deg);
    -o-transform:rotate(-940deg);
    -ms-transform:rotate(-940deg);
    transform:rotate(-940deg);}

JS：

$('.ball').animate({'right':375}, {duration:500});
$('.ball').addClass('rotate');

现在我需要计算div盒外球的准确角度和正确位置，所以球的滚动完全停在盒子中间。请帮助我

Answer 1

将你的球div放在一个容器里。

<div class="ball-container">
    <div class="ball">...</div>
</div>

在.ball上使用旋转过渡，在.ball-container上使用水平过渡。轮换次数应为：

（行走距离）/Math.PI

当我使用css3过渡时，我使用关键帧进行定位。

@-webkit-keyframes{       /*safari and chrome */
    from { left: 270px;} 
    to { left: 1920px; } 
}

@ keyframes{             /* firefox*/
    from { left: 270px;} 
    to { left: 1920px; } 
}

开始和结束位置设置与使用css定位任何元素相同。

有关如何使用转换的提示，请查看css tricks，本文末尾有一些很好的参考资料。

Answer 2

Check this fiddle

<强> CSS：

#box{
    width:900px;
    height:150px;
    position:relative;
    background:red;
    overflow:hidden;
}

.ball{
    width:150px;
    height:150px;
    transition:all 3s ease ;
    margin:0px auto;
}

.ball img{
    display:block;
    width:100%;
    height:100%;
    border-radius:50%;
 }

<强> JQuery的：

var s=$('.ball').position(); 
$('.ball').css({'position':'absolute'});
$('.ball').animate({'left':''+s.left+'px'});
$('.ball').css({'-moz-transform': 'rotate(360deg)'});

在页面加载时使用css3 / jquery滚动舍入图像

2 个答案:

Check this fiddle