javascript创建跟随鼠标好玩的东西

不说话,直接上代码。

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;
        }
    }
}

很好玩,如果添加到页面中或则也是一个不错的体验哈!!!!

原文地址:https://www.cnblogs.com/shoestrong/p/5759634.html