web前端-序列图效果

Demo地址 demo布局可能和我说的不太一样, 但是原理还是一样的

实现原理 , 盒子中放18个小盒子, 大盒子宽600高300, 每个小盒子宽高100, 每个小盒子进行左浮动并相对定位, 每个小盒子如果设置relative, 说明是相对自身进行定位, 我们需要在初始化的时候将小盒子的位置移动到别的位置, 在执行动画的时候进行复位即可, 因为有个事件差的效果, 所以在使用定时器的时候需要对每个小盒子的动画进行延迟执行.

效果图如下:

序列图效果

HTML

<button id='start'>开始动画1</button>
<button id='start2'>开始动画2</button>
<button id='start3'>开始动画3</button>
<button id='start4'>开始动画4</button>
<div class="container">
<ul id='ul'>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>

SCSS

.container{
position:relative;
width: 600px;
height: 300px;
margin: 50px auto;
border:1px solid #ccc;
ul{
list-style:none;
margin: 0;
padding: 0;
li{
position:absolute;
width: 100px;
height: 100px;
background: url('https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=673846323,2813923494&fm=23&gp=0.jpg') no-repeat;
}
}
}

JS

var ul = document.getElementById('ul');
var lis = ul.children;
var start = document.getElementById('start');
var start2 = document.getElementById('start2');
var start3 = document.getElementById('start3');
var start4 = document.getElementById('start4');
for (var i = 0, len = lis.length; i < len; i++) {
var col = parseInt(i % 6);
var row = parseInt(i / 6);
// 初始化每个li的位置
lis[i].style.left = col * 100 + 'px';
lis[i].style.top = row * 100 + 'px';
// 设置li的背景位置
var px = -col * 100 + 'px';
var py = -row * 100 + 'px';
lis[i].style.backgroundPosition = px + ' ' + py;
}
var animateS = {
a0: function() {
for (var i = 0, len = lis.length; i < len; i++) {
lis[i].index = i;
var col = parseInt(i % 6);
var row = parseInt(i / 6);
// 初始化每个li的位置
lis[i].style.left = -1000 + 'px';
lis[i].style.top = -500 + 'px';
// 设置li的背景位置
var px = -col * 100 + 'px';
var py = -row * 100 + 'px';
lis[i].style.backgroundPosition = px + ' ' + py;
var timer = null;
(function(index) {

clearTimeout(timer);
timer = setTimeout(function() {
var cols = parseInt(index % 6);
var rows = parseInt(index / 6);
animateMove(lis[index], { left: cols * 100, top: rows * 100 });
}, 200 * index)

})(i);
}
},
a1:function(){
for (var i = 0, len = lis.length; i < len; i++) {
lis[i].index = i;
var col = parseInt(i % 6);
var row = parseInt(i / 6);
// 初始化每个li的位置
lis[i].style.left = col * 100 + 'px';
lis[i].style.top = -500 + 'px';
// 设置li的背景位置
var px = -col * 100 + 'px';
var py = -row * 100 + 'px';
lis[i].style.backgroundPosition = px + ' ' + py;
var timer = null;
(function(index) {
clearTimeout(timer);
timer = setTimeout(function() {
var cols = parseInt(index % 6);
var rows = parseInt(index / 6);
animateMove(lis[index], { top: rows * 100 });
}, 200 * col)

})(i);
}
},
a2:function(){
for (var i = 0, len = lis.length; i < len; i++) {
lis[i].index = i;
var col = parseInt(i % 6);
var row = parseInt(i / 6);
// 初始化每个li的位置
lis[i].style.left = col * 100 + 'px';
lis[i].style.top = -500 + 'px';
// 设置li的背景位置
var px = -col * 100 + 'px';
var py = -row * 100 + 'px';
lis[i].style.backgroundPosition = px + ' ' + py;
var timer = null;
(function(index) {
clearTimeout(timer);
timer = setTimeout(function() {
var cols = parseInt(index % 6);
var rows = parseInt(index / 6);
animateMove(lis[index], { top: rows * 100 });
}, 100 * index)
})(i);
}
},
a3:function(){
for (var i = 0, len = lis.length; i < len; i++) {
lis[i].index = i;
var col = parseInt(i % 6);
var row = parseInt(i / 6);
// 初始化每个li的位置
lis[i].style.left = col * 100 + 'px';
if(col % 2 == 0) {
lis[i].style.top = -600 + 'px';
} else {
lis[i].style.top = 600 + 'px';
}
// 设置li的背景位置
var px = -col * 100 + 'px';
var py = -row * 100 + 'px';
lis[i].style.backgroundPosition = px + ' ' + py;
var timer = null;
(function(index) {
clearTimeout(timer);
timer = setTimeout(function() {
var cols = parseInt(index % 6);
var rows = parseInt(index / 6);
animateMove(lis[index], { top: rows * 100 });
}, 100 * index)
})(i);
}
}
}
start.onclick = function() {
animateS.a0()
}
start2.onclick = function() {
animateS.a1()
}
start3.onclick = function() {
animateS.a2()
}
start4.onclick = function() {
animateS.a3()
}
// 执行动画的函数
function animateMove(obj, dic) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var flag = true;
for (var key in dic) {

var begin = parseInt(getCssAttr(obj, key));
var target = parseInt(dic[key]);
var speed = (target - begin) * 0.2;
speed = target > begin ? Math.ceil(speed) : Math.floor(speed);
obj.style[key] = begin + speed + 'px';
if (target != begin) {
flag = false;
}
}
if (flag) {
clearInterval(obj.timer);
}
}, 50)
}

// 获取页内式的样式
function getCssAttr(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return window.getComputedStyle(obj, null).getPropertyValue(attr);
}
}