多图片聚拢效果
2016-06-14 本文已影响106人
云香水识
参考效果： http://xuan.news.cn/zt/ouzhoubei.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>聚拢效果</title>
<style>
#container {
width: 900px;
height: 480px;
margin: 40px auto;
position: relative;
overflow: visible;
}
#container img {
visibility: hidden;
position: absolute;
left: 50%;
top: 50%;
width: 160px;
margin: -50px 0 0 -80px;
transition: all 2s ease;
}
p {
text-align: center;
}
</style>
</head>
<body>
<div id="container">
< img src="http://tpic.home.news.cn/xhCloudNewsPic/xhpic003/M07/06/33/wKhThldP4_AEAAAAAAAAAAAAAAA985.jpg" alt="">
< img src="http://tpic.home.news.cn/xhCloudNewsPic/xhpic003/M03/06/35/wKhTh1dP5r8EAAAAAAAAAAAAAAA195.jpg" alt="">
< img src="http://tpic.home.news.cn/xhCloudNewsPic/xhpic002/M05/04/DB/wKhThVdP65AEAAAAAAAAAAAAAAA306.jpg" alt="">
< img src="http://tpic.home.news.cn/xhCloudNewsPic/xhpic003/M01/06/D8/wKhThldQ02IEAAAAAAAAAAAAAAA032.jpg" alt="">
< img src="http://tpic.home.news.cn/xhCloudNewsPic/xhpic001/M02/29/89/wKhTg1dQ21MEAAAAAAAAAAAAAAA496.jpg" alt="">
< img src="http://tpic.home.news.cn/xhCloudNewsPic/xhpic003/M07/06/DD/wKhTh1dQ2GwEAAAAAAAAAAAAAAA281.jpg" alt="">
< img src="http://tpic.home.news.cn/xhCloudNewsPic/xhpic003/M04/06/DD/wKhTh1dQ2I4EAAAAAAAAAAAAAAA955.jpg" alt="">
< img src="http://tpic.home.news.cn/xhCloudNewsPic/xhpic003/M07/06/DD/wKhTh1dQ2JwEAAAAAAAAAAAAAAA723.jpg" alt="">
< img src="http://tpic.home.news.cn/xhCloudNewsPic/xhpic002/M07/05/80/wKhThFdQ2tIEAAAAAAAAAAAAAAA659.jpg" alt="">
< img src="http://tpic.home.news.cn/xhCloudNewsPic/xhpic002/M09/04/E5/wKhThFdP8m0EAAAAAAAAAAAAAAA547.jpg" alt="">
</div>
<p>图片和效果参考均来自 <a href="http://xuan.news.cn/zt/ouzhoubei.html">http://xuan.news.cn/zt/ouzhoubei.html</a></p>
<script>
var container = document.getElementById('container');
var images = container.children;
/**
* 每日一题: 书写随机算法，实现一个多图片聚拢的效果
*/
/**
* 生成初始化位置，需要较为远离中心点
* @return 返回位置和旋转角度
*/
var randomBegin = function () {
// TODO
return {
left: 0,
top: 0,
rotate: 90
};
};
/**
* 生成结束位置，需要较为靠近中心点
* @return 返回位置和旋转角度
*/
var randomEnd = function (begin) {
// TODO
return {
left: 460,
top: 250,
rotate: 1234
};
};
[].slice.call(images).forEach(function (img, i) {
// 初始化随机位置
var begin = randomBegin();
img.style.left = begin.left + 'px';
img.style.top = begin.top + 'px';
img.style.transform = 'rotate(' + begin.rotate + 'deg)';
img.style.visibility = 'visible';
var end = randomEnd(begin);
setTimeout(function () {
img.style.left = end.left + 'px';
img.style.top = end.top + 'px';
img.style.transform = 'rotate(' + end.rotate + 'deg)';
}, 100 + i * 2000);
});
</script>
</body>
</html>
简单参考答案： http://runjs.cn/detail/dziuvuuk
