按钮跳转
2025-02-23 本文已影响0人
满天繁星_28c5
使用HTML+css3与jQuery书写一个按钮跳转的案例
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.实现简单的移动
<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();
// 设置过度
$('.scrile').css('transition','all 1s');
// 设置点击的下标
let this_index = $(this).index('.scrile');
// 激活位的下标
let active_index = $('.active').index('.scrile');
// 第一步动画
$('.active').animate({'left':'-40px'},20);
// 第二步移动距离
let t = $(this).offset().top - $('.active').offset().top + 'px';
// 普通调整为的移动距离
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);
}
// 处理结束时的归位
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; // 定义动画开关
$('.scrile').click(function(){
// 这里指当这个标志flag为真的时候，直接返回，不执行当前的这个动画
if(flag) return;
// 改变开关，动画执行完之前再次点击为true
flag=true;
if ($(this).hasClass('active')) {
return;
}
clearTimeout(timer);
// $('.scrile').stop();
// 设置过渡
$('.scrile').css({'transition':'all 1s'});
// 点击位的下标
let this_index = $(this).index('.scrile');
// 激活位的下标（蓝色按纽）
let active_index = $('.active').index('.scrile');
// $('.active').animate({'left':'-40px'});
// 移动距离
let t = $(this).offset().top - $('.active').offset().top + 'px';
// 普通调整位的距离
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(){
// 打开开关，动画执行完毕回到最初始状态
flag = false;
});
}
// 向上移动
for (let i = this_index; i < active_index; i++) {
$('.scrile').eq(i).delay(2000).animate({'top':direction + 'px'},20,function(){
flag = false;
});
}
// 处理结束是的归位
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>
效果：当点击第三个按钮后第二个按钮会向前移动，再第二个按钮移动到第三个按钮前是第三按钮向上移动。
运动前.jpg
运动中.jpg
运动原理.jpg
运动后.jpg
