0

我有随机数量的盒子，随机出现在随机颜色的页面上。我试图让他们从一个地方搬到另一个地方。本质上，我对鼠标移动事件一点也不熟悉，所以这是一个很大的挑战。尽管这很简单。

下面是 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);  
    }




}

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

4

2 回答 2

1

那么首先肯定会获得鼠标位置，之后世界就是你的牡蛎。

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

}
于 2013-10-20T22:58:19.417 回答
0 

<!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>

于 2014-10-23T04:01:54.457 回答