效果展示
相关代码
html:
<div class="mimabox">
<div class="sign_hd">
<span class="cloud"></span>
<ul class="sign_hd">
<li class="current">登录</li>
<li>注册</li>
</ul>
</div>
<div class="sign_bd">
<ul>
<li class="login_in">
登录板块
</li>
<li class="register">
注册板块
</li>
</ul>
</div>
</div>
css:
.mimabox {
position: absolute;
}
.mimabox .sign_hd {
height: 35px;
position: relative;
}
.mimabox .sign_hd .cloud {
position: absolute;
bottom: 0;
width: 44px;
height: 3px;
background-color: #ff6900;
border-radius: 2px;
}
.mimabox .sign_hd ul {
list-style: none;
}
.mimabox .sign_hd ul li {
cursor: pointer;
margin-right: 15px;
float: left;
font-size: 22px;
color: #bbb;
transition: all 0.2s;
}
.mimabox .sign_hd ul .current {
color: #000;
}
.mimabox .sign_bd {
overflow: hidden;
position: relative;
width: 360px;
height: 430px;
}
.mimabox .sign_bd ul {
position: absolute;
width: 720px;
height: 430px;
}
.mimabox .sign_bd ul li {
position: relative;
display: block;
list-style: none;
float: left;
width: 360px;
height: 430px;
}
js
// 移动动画函数
function animate(obj, target, callback) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
// 步长值写到定时器的里面
// 把步长值改为整数,不要出现小数的问题
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target) {
clearInterval(obj.timer);
// 回调函数位置:定时器结束的位置
if (callback) {
// 调用函数
callback();
}
}
// 把每次步长值给为逐渐变小的值(目标值-现在位置/10)
obj.style.left = obj.offsetLeft + step + 'px';
}, 15);
}
window.addEventListener('load', function() {
// 获取元素
var cloud = document.querySelector('.cloud');
var signhd = document.querySelector('.sign_hd');
var lis = signhd.querySelectorAll('li');
var signbd = document.querySelector('.sign_bd');
var signbdul = signbd.querySelector('ul');
var white = document.querySelector('.white');
var mimabox = document.querySelector('.mimabox');
var signbd = document.querySelector('.sign_bd');
var area = 0;
var bdarea = signbd.offsetWidth;
// 筋斗云+登录注册跳转
for (var i = 0; i < lis.length; i++) {
lis[i].setAttribute('index', i);
lis[i].addEventListener('click', function() {
for (var i = 0; i < lis.length; i++) {
lis[i].className = ' ';
area = this.offsetLeft;
this.className = 'current';
var index = this.getAttribute('index');
if (index == 1) {
console.log('11111');
signbox.style.height = '530px';
signbd.style.height = '530px';
} else {
console.log('0000');
signbox.style.height = '430px';
signbd.style.height = '430px';
}
console.log('aaa' + index);
animate(cloud, area);
console.log(index * bdarea);
animate(signbdul, -index * bdarea);
}
});
}
});