闲了无事做了一下，彩旗飘飘，衣带偏偏的效果，，哈哈哈，直接上图

wKiom1TM8WCBR2fWAACqcWx4zqA992.jpg

wKioL1TM8k2Bxb21AABSJo23STA917.jpg



<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>js事件彩旗飘飘</title>
<link rel="stylesheet" href="">
<style type="text/css">
    .unit{
       width: 40px;
       height: 40px;
       position: absolute;
    }
 
</style>
<script>
    window.onload =function ()
    {
         var  colors= ["#000000","red","blue","green","#798d2a","yellow","red","#33dd11","#161dfd","#12aacc","#aabbcc","#ddd123","#a8d49a","#acdadd","#fd2345","#aab321","#112233","green","yellow"];
         var unit = document.querySelectorAll(".unit") || document.getElementsByClassName("unit");
       document. = function () 
       {
           ev = event ||window.event;
           var x = ev.offsetX;
           var y = ev.offsetY;
           
           var len = unit.length;          
           var colorRandom =Math.floor(Math.random()*19);
           var divRandom =Math.floor(Math.random()*50);
           unit[divRandom].style.background= colors[Math.floor(colorRandom)];
           for (var i = len - 1; i> 0; i--) {
              unit[i].style.left =unit[i-1].offsetLeft - 5 + "px";
              unit[i].style.top =unit[i-1].offsetTop - 5 + "px";     
           }
           unit[0].style.left = x + "px";
           unit[0].style.top = y + "px";
       }
    }
</script>
</head>
<body>
<div class="unit"></div>
<div class="unit"></div>
<div class="unit"></div>
<div class="unit"></div>
<div class="unit"></div>
<div class="unit"></div>
<div class="unit"></div>
<div class="unit"></div>
<div class="unit"></div>
<div class="unit"></div>
<div class="unit"></div>
<div class="unit"></div>
<div class="unit"></div>
<div class="unit"></div>
<div class="unit"></div>
<div class="unit"></div>
<div class="unit"></div>
<div class="unit"></div>
<div class="unit"></div>
<div class="unit"></div>
<div class="unit"></div>
<div class="unit"></div>
<div class="unit"></div>
<div class="unit"></div>
<div class="unit"></div>
<div class="unit"></div>
<div class="unit"></div>
<div class="unit"></div>
<div class="unit"></div>
<div class="unit"></div>
<div class="unit"></div>
<div class="unit"></div>
<div class="unit"></div>
<div class="unit"></div>
<div class="unit"></div>
<div class="unit"></div>
<div class="unit"></div>
<div class="unit"></div>
<div class="unit"></div>
<div class="unit"></div>
<div class="unit"></div>
<div class="unit"></div>
<div class="unit"></div>
<div class="unit"></div>
<div class="unit"></div>
<div class="unit"></div>
<div class="unit"></div>
<div class="unit"></div>
<div class="unit"></div>
<div class="unit"></div>
</body></html>