使用HTML+css3與jQuery書寫一個按鈕跳轉(zhuǎn)的案例
HTML布局：
<body>
<nav>
<div>
<span></span>
<span class="scrile"></span>
<span></span>
<p>1</p>
</div>
<div>
<span></span>
<span class="scrile active"></span>
<span></span>
<p>2</p>
</div>
<div>
<span></span>
<span class="scrile"></span>
<span></span>
<p>3</p>
</div>
<div>
<span></span>
<span class="scrile"></span>
<span></span>
<p>4</p>
</div>
</nav>
</body>
css3布局：
<style>
*{
padding:0;
margin:0;
}
nav{
width:100%;
height:250px;
margin-top:80px;
margin-left:50px;
/*background:red;*/
display:flex;
flex-direction:column;
justify-content:space-between;
}
nav>div{
width:100%;
height:42px;
/*background:#ccc;*/
display: flex;
justify-content:space-around;
align-items: center;
}
nav>div>span{
width:40px;
height:20px;
position: relative;
top: 0;
left: 0;
/*transition:all 1s;*/
}
nav>div>span,p{
display:block;
}
nav>div>span.scrile{
width:20px;
border-radius: 50%;
border:1px solid #333;
}
nav>div>span.active{
border:1px solid cyan;
}
/* nav>div>span.move{
left: -40px;
}*/
nav>div>span.active::before{
content:"●";
font-size:30px;
line-height:15px;
color:cyan;
}
nav>div>p{
background: #ccc;
text-indent: 2rem;
font-size:20px;
height:42px;
line-height: 42px;
width:85%;
flex: 1;
}
</style>
jQuery布局：
1.實現(xiàn)簡單的移動
<script>
$(function(){
let timer;
$('.scrile').click(function(){
// $('.scrile').not('.active').click(function(){
// if($(this).hasClass('active')){
// return;
// }
clearTimeout(timer);
if($('.scrile').is(":animated")){//判斷動畫是否是在運動
return;
}
$('.scrile').stop();
// 設(shè)置過度
$('.scrile').css('transition','all 1s');
// 設(shè)置點擊的下標(biāo)
let this_index = $(this).index('.scrile');
// 激活位的下標(biāo)
let active_index = $('.active').index('.scrile');
// 第一步動畫
$('.active').animate({'left':'-40px'},20);
// 第二步移動距離
let t = $(this).offset().top - $('.active').offset().top + 'px';
// 普通調(diào)整為的移動距離
let direction = -69.3;
if (parseInt(t) < 0) {
direction = 69.3;
}
// 選中按鈕的移動
$('.active').delay(1000).animate({'top':t},20).delay(1000).animate({'left':0},10);
// 向下移動
for (var i = this_index; i > active_index; i--) {
$('.scrile').eq(i).delay(2000).animate({'top':direction + 'px'},20);
}
// 向上移動
for (var i = this_index; i < active_index; i++) {
$('.scrile').eq(i).delay(2000).animate({'top':direction + 'px'},20);
}
// 處理結(jié)束時的歸位
let _this=$(this)
timer=setTimeout(function(){
$('.scrile').css({'transition':'none'});
// $('.scrile').css({"transition","none"});
$('.active').removeClass('active');
$('.scrile').css({
'left':'0',
'top':'0'
});
_this.addClass('active');
},3000);
});
});
</script>
2.升級版
<script>
$(function(){
let timer;
let flag = false; // 定義動畫開關(guān)
$('.scrile').click(function(){
// 這里指當(dāng)這個標(biāo)志flag為真的時候，直接返回，不執(zhí)行當(dāng)前的這個動畫
if(flag) return;
// 改變開關(guān)，動畫執(zhí)行完之前再次點擊為true
flag=true;
if ($(this).hasClass('active')) {
return;
}
clearTimeout(timer);
// $('.scrile').stop();
// 設(shè)置過渡
$('.scrile').css({'transition':'all 1s'});
// 點擊位的下標(biāo)
let this_index = $(this).index('.scrile');
// 激活位的下標(biāo)（藍色按紐）
let active_index = $('.active').index('.scrile');
// $('.active').animate({'left':'-40px'});
// 移動距離
let t = $(this).offset().top - $('.active').offset().top + 'px';
// 普通調(diào)整位的距離
let direction = -69.3;
if (parseInt(t) < 0) {
direction = 69.3;
}
// 選中按紐的移動
$('.active').animate({'left':'-40px'}).delay(1000).animate({'top':t},20).delay(1000).animate({'left':0},10);
// 向下移動
for (let i = this_index; i > active_index; i--) {
$('.scrile').eq(i).delay(2000).animate({'top':direction + 'px'},20,function(){
// 打開開關(guān)，動畫執(zhí)行完畢回到最初始狀態(tài)
flag = false;
});
}
// 向上移動
for (let i = this_index; i < active_index; i++) {
$('.scrile').eq(i).delay(2000).animate({'top':direction + 'px'},20,function(){
flag = false;
});
}
// 處理結(jié)束是的歸位
let _this = $(this);
timer = setTimeout(function(){
$('.active').removeClass('active');
$('.scrile').css({'transition':'none'});
$('.scrile').css({
'top':0,
'left':0
});
_this.addClass('active');
},3000);
});
});
</script>
引用插件：
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
效果：當(dāng)點擊第三個按鈕后第二個按鈕會向前移動，再第二個按鈕移動到第三個按鈕前是第三按鈕向上移動。
運動前.jpg
運動中.jpg
運動原理.jpg
運動后.jpg
