Demo地址 demo布局可能和我說的不太一樣, 但是原理還是一樣的
實現(xiàn)原理 , 盒子中放18個小盒子, 大盒子寬600高300, 每個小盒子寬高100, 每個小盒子進(jìn)行左浮動并相對定位, 每個小盒子如果設(shè)置relative, 說明是相對自身進(jìn)行定位, 我們需要在初始化的時候?qū)⑿『凶拥奈恢靡苿拥絼e的位置, 在執(zhí)行動畫的時候進(jìn)行復(fù)位即可, 因為有個事件差的效果, 所以在使用定時器的時候需要對每個小盒子的動畫進(jìn)行延遲執(zhí)行.
效果圖如下:
序列圖效果
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';
// 設(shè)置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';
// 設(shè)置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';
// 設(shè)置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';
// 設(shè)置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';
}
// 設(shè)置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()
}
// 執(zhí)行動畫的函數(shù)
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)
}
// 獲取頁內(nèi)式的樣式
function getCssAttr(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return window.getComputedStyle(obj, null).getPropertyValue(attr);
}
}
