用js动画实现随机拼图
01 - javascript的小实例(随机拼图动画效果)
实现的效果
当刷新网页时,在一个div盒子里,由100个小div盒子随机飞入组成一张完整的图片;
用到的知识点有
1.css
- positon的相对定位(relative)和绝对定位(absolute);
- background属性;
2.js
- 动态获取标签和静态获取标签
静态获取标签的方法只有三种:
1.let div = document.getElementById(" ")
2.let div1 = document.querySelector(" ")
3.let div2 = document.querySelectorAll(" ")
静态获取标签就是获取一次之后,之后就不会刷新标签里的内容了;而动态获取标签的内容就是会动态的去获取标签,并且实时刷新。
- Math API
Math.trunc() //就是去除一个数的小数部分。
详情请点击
代码展示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>fan-js</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
position: relative;
margin: 50px auto;
width: 500px;
height: 500px;
background: #f9f9f9;
border: 1px solid #c9c6c6;
}
.box>div {
position: absolute;
width: 50px;
height: 50px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box">
<div></div>
</div>
<script src="/js/animation.js"></script>
<script>
let arr = []
let index = 0;
let box = document.getElementsByClassName('box')[0]
let child = box.getElementsByTagName("div")
console.log(child)
for (let i = 0; i < 100; i++) {
arr.push(i)
}
/*
然后打乱数组中存储盒子的顺序,从而实现随机的效果;
这里我们使用数组中的API sort方法;
*/
arr.sort((a, b) => Math.random() - 0.5)
function fn() {
let data = arr[index++]
if (data === undefined) return
console.log(data)
let top = Math.trunc(data / 10) * 50;
let left = data % 10 * 50
let div = `<div style="background:url('/img/ld.jpg')
${-left}px ${-top}px;
background-size:500px;"></div>`
box.innerHTML += div;
let len = child.length
animation(child[len - 1], {
data: {
top,
left
}
}, 100, fn)
}
fn()
</script>
</body>
</html>
代码详解及思路
先写一个宽高为500px的大盒子,然后给它设置css样式,然后先给小盒子预设一个css样式;小盒子默认是在大盒子的左上角,然后我们通过设置每一个小盒子的定位(left,top),让它回到原本属于它的位置。接下来再让小盒子每次出现的顺序不一样,从而就实现了随机的效果!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>fan-js</title>
<style>
*{margin:0;padding:0;}
.box{
position: relative;
margin: 50px auto;
width: 500px;
height: 500px;
background: #f9f9f9;
border: 1px solid #c9c6c6;
}
.box>div{
position: absolute;
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
关于animation.js动画插件和详解
//先引入一个js动画的插件(一个大佬写的)
<script src="/js/animation.js"></script>
因为我们要实现的效果是由100个小盒子随机飞入组成一张完整的照片,所以我们用js去生成它们,不然用手一个一个的写,可能会累死…
<script>
/*
我们应该声明一个数组,来有序的存储这些盒子,
因为每个小盒子所表现的都是照片的不同位置,
所以不能重复,也不能缺。
*/
//动态获取大盒子box
let box = document.getElementsByClassName('box')[0]
//动态获取大盒子box里的小盒子
let child = box.getElementsByTagName("div")
let arr = [] //这里的 let 是es6的东西
let index = 0
for (let i = 0; i < 100; i++) {
arr.push(i)
}
// 此时数组中就有了一百个元素,而且每个元素的下标就是元素的内容
/*
然后打乱数组中存储盒子的顺序,从而实现随机的效果;
这里我们使用数组中的API sort方法;
*/
arr.sort((a,b)=>Math.random()-0.5)
console.log(arr)
//然后我们写一个fn方法来实现添加小盒子的工作
function fn(){
//用一个data变量将小盒子的序号获取出来
let data = arr[index]
if(data === undefined)return
/*
在一个500px*500px的大盒子里面能装10行10列的50px*50px的小盒子
然后小盒子的下标从0~99;
所以
第1行的小盒子的下标就是从0~9
第2行的小盒子的下标就是从10~19
第3行的小盒子的下标就是从20~39
……
第10行的小盒子的下标就是从90~99
再然后,我们发现
第1个小盒子(下标为0)的top:0px;left:0px;
第2个小盒子(下标为1)的top:0px;left:50px;
……
第11个小盒子(下标为10)的top:50px;left:0px;
第12个小盒子(下标为11)的top:50px;left:50px;
由此,我们得出每个盒子的
top值为他们下标的十位乘50px;
left值为他们下标的个位乘50px;
即下标为11的盒子
top = Math.trunc(11/10) * 50px
left = 11%10 * 50
*/
//Math.trunc是es6的新方法,就是把一个数取整
let top = Math.trunc(data / 10) * 50
let left = data % 10 * 50
let div = `<div style="background:url('想拼成的图片地址')
${-left}px ${-top}px;background-size:500px;"></div>`
//然后把生成的小盒子,通过innerHTML方法添加到大盒子box中
box.innerHTML += div
/*
接下来使用animation.js插件给每个小盒子
对应的top和left来实现飘入的效果
animation()里面一共有四个参数
第一个是要实现动画的对象,
第二个是,对象里面包含一个对象属性,即data这个对象
然后里面的设置top和left属性
第三个是设置动画的时间以毫秒为单位(ms)
第四个是一个回调函数,当动画执行完之后,
再执行的东西,在这里即指再调用fn函数
*/
animation(child[len-1],{
data:{
top,
left
}
},100,fn)
}
fn()
/*
然后在函数外面调用函数,在函数
内部就会一直重复调用,但是我们只有一百个小盒子,
所以只需调用一百次,当超过这个值时,data取到的值就是undefined
为了阻止这种情况,我们需在函数内部加一个判断条件
if(data === undefined) return
*/
</script>