尝试移动盒子

我有一个随机数量的盒子，随机在随机颜色的页面上。我正在努力让他们从一个地方搬到另一个地方。从本质上讲，我对鼠标移动事件一点也不熟悉，所以这是一个相当大的挑战。尽管它非常简单。

下面是 HTML 的代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Ramdom Boxes</title>
        <script src="A2Q1.js"></script>
    </head>
    <body>  
    </body>
</html>

Javascript：

window.onload = init;
function init() {
    //when page is loaded create a bunch of boxes randomly throughout the page
    //get the body element of the document
    var body = document.getElementsByTagName("body")[0];
    //store width and height of boxes
    var boxWidth = 50;
    var boxHeight = 50;
    //create the random number for the boxes 
    var randNum = Math.floor(Math.random() * 500 + 1);
    //create the boxes
    for(var i=0;i<randNum;i++){     
        //create the random color and random positions
        var colour = Math.round(0xffffff * Math.random()).toString(16);
        var pos1 = Math.floor(Math.random() * window.innerWidth)
        var pos2 = Math.floor(Math.random() * window.innerHeight)
        // Define an array of css attributes
        var attr =[
          // Assign a colour to the box
          'background-color:#' + colour,
          // Place the box somewhere inside the window
          'left:' + pos1 + 'px',
          'top:'  + pos2 + 'px',
          // Set the box size
          'width:'  + boxWidth + 'px',
          'height:' + boxHeight + 'px',
          'cursor: pointer;',
          'position:absolute;'
        ];
        //join the attributes together 
        var attributes = attr.join(';');
        //create a new div tag
        var div = document.createElement("div");
        //gives the box a unique id
        div.setAttribute("id","box"+i) 
        //create the design of the box
        div.setAttribute("style",attributes);
        //add to the body
        body.appendChild(div);  
    }


}

我真的不知道从哪里开始...

好吧，开始肯定会获得鼠标位置，之后世界就是你的牡蛎。

var mousex = 0;
var mousey = 0;

function getXY(e){ 
  if (!e) e = window.event; 
  if (e)
  { 
    if (e.pageX || e.pageY)
    { // this doesn't work on IE6!! (works on FF,Moz,Opera7)
      mousex = e.pageX;
      mousey = e.pageY;
      go = '[e.pageX]';
      if (e.clientX || e.clientY) go += ' [e.clientX] '
    }
    else if (e.clientX || e.clientY)
    { // works on IE6,FF,Moz,Opera7
      mousex = e.clientX + document.body.scrollLeft;
      mousey = e.clientY + document.body.scrollTop;
      go = '[e.clientX]';
      if (e.pageX || e.pageY) go += ' [e.pageX] '
    }  
  }
}

使用鼠标信息，您可以在另一个功能中执行此操作。

function moveBoxes(){
document.body.onmousemove = updater; //or some container div!
updater();

}

function updater(e){
getXY(e); 
document.getElementById('aboxid').style.left=mousex+'px'; 
}

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>MouseDown MouseUp</title>
        <meta charset="UTF-8">
        <style>
            #insideBox{
                height: 100px;
                width: 100px;
                background-color: black;
                left:300px;
                top:300px;
                position:absolute;
            }
        </style>
            
        <script>
            var mouseFire = null;
            window.onload = init;
            function init(){
                var div = document.getElementById("insideBox");
                div.addEventListener("mousedown",mouseDrag,false);
            }
            
            function mouseDrag(e){
                var evt = e || window.event;
                mouseFire = evt.target || evt.srcElement;
                document.addEventListener("mousemove",mouseMove,false);
                document.addEventListener("mouseup",mouseDrop,false);
            }
            
            function mouseMove(e){
                var evt = e || window.event;
                var mouseX = evt.clientX;
                var mouseY = evt.clientY;
                mouseFire.style.left = mouseX-50+"px";
                mouseFire.style.top = mouseY-50+"px";
            }
            
            function mouseDrop(e){
                mouseFire = null;
                document.removeEventListener("mousemove",mouseMove,false);
            }
        </script>
    </head>
    <body>
        <div id="insideBox"></div>
    </body>
</html>

相关内容

最新更新

热门标签：