不说话,直接上代码。
css:
#createGoDivBox{ display: none; } #createGoDivBox div{ background-color: #00A6C2; position: absolute; border-radius: 50%; }
js:
init(); function init(){ // 获取body var parBox = document.body || document.getElementsByTagName(‘body‘)[0]; // 创建div var createGoDivBox=document.createElement("div"); // 子盒子数量 var divNum=10; // 添加ID createGoDivBox.setAttribute("id","createGoDivBox"); // 插入body中 parBox.appendChild(createGoDivBox); // 创建子盒子 addElementDiv(createGoDivBox,divNum); // 添加事件 bindEvent(createGoDivBox,divNum); } function addElementDiv(parent,createNum) { // 创建子盒子 var div; for(var i = createNum;i>0;i--){ div = document.createElement("div"); div.style.width = i+"px"; div.style.height = i+"px"; parent.appendChild(div); } } function bindEvent(createGoDivBox,divNum){ // 添加事件 var divs = createGoDivBox.getElementsByTagName(‘div‘); document.onmousemove = function(event){ createGoDivBox.style.display ="block"; divs[0].style.left = event.clientX-divNum/2 + "px"; divs[0].style.top = event.clientY-divNum/2 + "px"; for (var i = divs.length-1;i>0;i--) { divs[i].style.left = divs[i-1].style.left; divs[i].style.top = divs[i-1].style.top; } } }
很好玩,如果添加到页面中或则也是一个不错的体验哈!!!!
时间: 2024-10-25 22:05:24