用js动画实现随机拼图

最新推荐文章于 2021-10-08 14:45:51 发布

qq_44467976

最新推荐文章于 2021-10-08 14:45:51 发布

阅读量726

点赞数 2

分类专栏： js学习文章标签： js动画实例拼图

本文链接：https://blog.csdn.net/qq_44467976/article/details/88571212

版权

本文介绍了一个JavaScript的小实例，展示了如何创建一个随机拼图动画效果。当刷新页面时，100个小div会以随机顺序飞入一个大的div容器，组合成完整的图片。实现这个效果需要用到CSS的position定位和background属性，以及JavaScript动态获取标签和Math API。通过设置每个小div的left和top属性，结合不同的显示顺序，实现了随机动画效果。

摘要由CSDN通过智能技术生成

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

最低0.47元/天解锁文章

qq_44467976

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
用js动画实现随机拼图

01 - javascript的小实例（随机拼图动画效果）实现的效果当刷新网页时，在一个div盒子里,由100个小div盒子随机飞入组成一张完整的图片；用到的知识点有1.csspositon的相对定位（relative）和绝对定位（absolute）；background属性；2.js动态获取标签和静态获取标签静态获取标签的方法只有三种：1.let div ...
复制链接

扫一扫