zoukankan      html  css  js  c++  java
  • 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;
            }
        }
    }

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

  • 相关阅读:
    组合数取模 Lucas定理
    关于上下界的二分查找
    POJ 1091 跳蚤
    Eular 函数模板
    POJ 数学(3)
    SRM 567 div2
    SRM 570 div2
    最大最小搜索,alpha beta 剪枝
    JavaScript:prototype属性使用方法
    ArcGIS网络分析之Silverlight客户端服务区分析(五)
  • 原文地址:https://www.cnblogs.com/shoestrong/p/5759634.html
Copyright © 2011-2022 走看看