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

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

  • 相关阅读:
    CentOS(RedHat) 6.2 Samba share权限拒绝访问
    Android NDK调试C++源码(转)
    linux du命令: 显示文件、目录大小
    网络游戏的同步
    游戏开发辅助库
    Unity3D 200个插件免费分享
    C#UDP同步实例
    C#UDP(接收和发送源码)源码完整
    C#完整的通信代码(点对点,点对多,同步,异步,UDP,TCP)
    内置函数及匿名函数
  • 原文地址:https://www.cnblogs.com/shoestrong/p/5759634.html
Copyright © 2011-2022 走看看