Question

我正在父母内部轮换孩子。父是固定的宽度和高度，而孩子的宽度和高度是动态的。

让我们说，

Child width - Cw
Child height - Ch
Parent width - Pw
Parent height - Ph


When `Cw > Pw && Ch < Ph` then expected: `left=0 and vertically centered`
When `Cw < Pw && Ch > Ph` then expected: `top=0 and horizontally centered`
When `Cw > Pw && Ch > Ph` then expected: `left=0 and top=0`
When `Cw < Pw && Ch < Ph` then expected: `vertically and horizontally centered`

小提琴 - http://jsfiddle.net/Xja29/1/

我在最近几天尝试过很多次。我在做的其中一个小提琴就在这里。只是因为你不相信 - http://jsfiddle.net/zgvEC/50/

Answer 1

你有没有尝试稍微改变一下并使用CSS进行轮换，jQuery用于开始/停止动作？以下只是一个shell示例，供您查看如何将其应用于您的目的。

喜欢 this fiddle

CSS

div{
    display:inline-block;
}
.parent{
    border:1px solid grey;
}
.child{
    height:100px;
    width:100px;
    border-radius:9px;
    background:blue;
    margin:10px;
}

.rotate {
    -webkit-animation:rotate 4s linear infinite;
    -moz-animation:rotate 4s linear infinite;
    animation:rotate 4s linear infinite;
}
@-moz-keyframes rotate { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg); } }
@keyframes rotate { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

HTML

<div class='parent'>
    <div class='child'>
    </div>    
</div>
<a id='rotate' href='#'>Rotate</a>

的jQuery

$('#rotate').click(function(){
   $('.child').addClass('rotate');
});

以旋转的Div为中心

1 个答案: