闲了无事做了一下,彩旗飘飘,衣带偏偏的效果,,哈哈哈,直接上图
<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>
转载于:https://blog.51cto.com/shuizhongyue/1610370