原生JS图片打散效果

G018_star sky♬

于 2021-01-31 19:38:25 发布

阅读量208

点赞数

分类专栏： JavaScript 文章标签： html css javascript

本文链接：https://blog.csdn.net/qq_42526440/article/details/113483613

版权

JavaScript 专栏收录该内容

95 篇文章 5 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="main">
        <button>打散</button>
        <button>合起</button>
        <div>
            <img src="../img/2.jpg" alt="">
            <img src="../img/2.jpg" alt="">
            <img src="../img/2.jpg" alt="">
        </div>
    </div>
</body>
<script>
    var buttons=document.querySelectorAll('button')
    var imgs=document.querySelectorAll("img")
    buttons[0].onclick=function(){
        for(var i=0;i<imgs.length;i++){
            var x=Math.random()*400-200;
            var d=Math.random()*360;
            imgs[i].style.transform=`translateX(${x}px) rotate(${d}deg)`
        }
    }
    buttons[1].onclick=function(){
        for(var i=0;i<imgs.length;i++){
            imgs[i].style.transform=""
        }
    }
</script>
</html>

效果图如下:
在这里插入图片描述

G018_star sky♬

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生JS图片打散效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div class
复制链接

扫一扫

专栏目录