圆圈之间的CSS转换

我有一系列用户可以使用Next和Back按钮来遍历的圆圈。该过程从第一步开始并前进到最后一步。当用户点击下一个按钮时，当前圆圈缩小到正常大小，下一个圆圈放大。我想添加一个动画，以便当前的圆形动画变为正常大小，而下一个圆形动画变得更大。我也想让当前选定的圈子围绕它的边框。圆圈之间的CSS转换

这里有一个形象： enter image description here

这里是一个开始的小提琴： http://jsfiddle.net/psivadasan/4Q4Z2/

HTML

<div id="circle-container"> 
    <div class="circle"></div> 
    <div class="circle"></div> 
    <div class="circle-selected"></div> 
    <div class="circle"></div> 
    <div class="circle"></div> 
    <div class="circle"></div> 
    <div class="circle"></div> 
</div> 
<div> 
    <div class="back">Back</div> 
    <div class="next">Next</div> 
</div>

CSS

.circle { 
width: 50px; 
height: 50px; 
-moz-border-radius: 50%; 
-webkit-border-radius: 50%; 
border-radius: 50%; 
background: #4679BD; 
display: inline-block; 
margin: 0 10px 20px 0; 
} 
.circle-selected { 
    width: 70px; 
    height: 70px; 
    -moz-border-radius: 50%; 
    -webkit-border-radius: 50%; 
    border-radius: 50%; 
    background: #4679BD; 
    display: inline-block; 
    margin: 0 10px 10px 0; 
} 
.back {float: left; margin: 0 20px 0 0;} 
.next {float: left;}

的JavaScript

$(".next").live('click', function() { 
    $("#circle-container").find('.circle-selected').next().addClass("circle-selected"); 
});

来源

2014-01-27 b-marls

还增加了背部（前）按钮的工作，[DEMO]（HTTP： //jsfiddle.net/aynamohol/9k5aa/embedded/result/）[joshc]（http://stackoverflow.com/users/2680216/joshc） – 2014-01-27 06:00:09

至于圆形边框，只需使用一个box-shadow：

.circle-selected { 
    width: 70px; 
    height: 70px; 
    -moz-border-radius: 50%; 
    -webkit-border-radius: 50%; 
    border-radius: 50%; 
    background: #4679BD; 
    display: inline-block; 
    margin: 0 10px 10px 0; 
    box-shadow: 0 0 0 3px #000;  /* Added this */ 
}

至于过渡，只需将其添加到circle类：

.circle { 
    width: 50px; 
    height: 50px; 
    -moz-border-radius: 50%; 
    -webkit-border-radius: 50%; 
    border-radius: 50%; 
    background: #4679BD; 
    display: inline-block; 
    margin: 0 10px 20px 0; 
    transition: all 2s;    /* Added these */ 
    -webkit-transition: all 2s; 
    -moz-transition: all 2s; 
}

并以从类中删除元素选择下一个圆时，您可以使用以下内容：

$(".next").live('click', function() { 
    $("#circle-container").find('.circle-selected').removeClass('circle-selected').next().addClass("circle-selected"); 
});

如果您要添加的back功能，您只需使用.prev()，而不是.next()：

$(".next").live('click', function() { 
    $("#circle-container").find('.circle-selected').removeClass('circle-selected').next().addClass("circle-selected"); 
}); 
$(".back").live('click', function() { 
    $("#circle-container").find('.circle-selected').removeClass('circle-selected').prev().addClass("circle-selected"); 
});

UPDATED EXAMPLE HERE

来源

2014-01-27 05:49:23

这是完美的！谢谢JoshC。 –

做了一个小小的更新 - 在你移动时改变颜色。 http://jsfiddle.net/psivadasan/V4W86/2/ –

圆圈之间的CSS转换

回答

相关问题