关键代码:
<script>document.onmousemove = function (e) {// 加div节点var div = document.createElement('div');div.style.width = '5px';div.style.height = '5px';// 加img节点var img = document.createElement('img');// 将Img追加到div里面。div.appendChild(img);img.src = './1.jpg';img.style.width = '5px';// 给盒子设置定位,后面更改坐标位置的时候需要用div.style.position = 'absolute';// 追加divdocument.body.appendChild(div);// 通过事件对象获得盒子的坐标。var x = e.clientX;var y = e.clientY;div.style.left = x + 'px';div.style.top = y + 'px';div.style.transition = 'all 1s ease'// 设置多个小方块(停几秒。让小块放大一下,向上,向左右任意移动)setTimeout(function () {// 设置小方块放大div.style.transform = 'scale(3)';// 让坐标加上一个随机数将小方块的坐标进行更改div.style.left = x + Math.floor(Math.random() * (401)) - 200 + 'px';div.style.top = y + Math.floor(Math.random() * (101)) - 100 + 'px';}, 100);setTimeout(function () {document.body.removeChild(div)}, 1000);}</script>
效果图: