Question

我想要一个跟随光标的div。但你应该有可能在div中输入。不幸的是我只能得到div跟随光标，但光标不会进入div。

或者像这样：是否有可能光标被困在div中？直到他中断或进入。如果光标移动到边框，div应该在适当的方向上移动。（关闭函数目前不存在于代码中，但我可以自己解决。）

＆＃13;

var MicrosoftModel=0;
var xplus=10,yplus=10;
var runnerobject;

                          
function MouseAction(mausx,mausy)
{
    
  runnerobject.left=mausx+xplus;
  runnerobject.top=mausy+yplus;
}

function MouseMove(event)
{
    
  var mausx,mausy;
  if (typeof(event)!="object")              
    return;
  if (MicrosoftModel)                     
  {
      document.getElementById("runner").style.display = "none!important";
    mausx=event.clientX;
    mausy=event.clientY;
    if (document.body.scrollLeft)
      mausx+=document.body.scrollLeft;
    if (document.body.scrollTop)
      mausy+=document.body.scrollTop;
  }
  else                                    
  {
    mausx=event.pageX;
    mausy=event.pageY;
  }
  MouseAction(mausx,mausy);
}

          
function MouseInit()
{
    document.getElementById("runner").style.display = "none!important";
  if (document.all)         
  {
    MicrosoftModel=1;
    window.onmousemove=MouseMove;
    runnerobject=document.all.runner.style;
  }
  if (!(MicrosoftModel))                  
  {
    if (typeof(document.addEventListener)=="function")
                                         
    {
      document.addEventListener("mousemove",MouseMove,true);
      runnerobject=document.getElementById("runner").style;
    }
    else
    if (document.runner)                 
    {
      window.captureEvents(Event.MOUSEMOVE);
      window.onmousemove=MouseMove;
      runnerobject=document.runner;
    }
  }
}

＆＃13;

body { 
  background-color: black; 
}

.cursor-catcher{ 
  background: hsla(0, 0%, 100%, 0.70);
  max-width: 644px;
  width: 100%;
  padding: 22px 36px 22px 36px;
}

.x{
  border-radius: 5px;
  border: solid 1px black;
  width: 10px;
}

＆＃13;

<body onLoad="MouseInit();" onMouseMove="MouseMove(event);">

<div name="runner" id="runner" style="position:absolute; left:10; top:50;">
<div class="cursor-catcher">
    <h2>Newsletter</h2>
    Name: <input type="text" name="fullname"><br>
    Email: <input type="text" name="email"><br> 
    <br>
    <div class="x">x</div>
</div>
</div>

</body>

＆＃13;

Answer 1

效果很好，我认为这是个主意。（不需要缓冲区）。

我添加了你的表单（我忽略了样式，你可以把它放回去）

现在，根据要求，它不会比顶部高出100px

<head>
<style>
#my_div {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
#my_div {
  width: 300px;
  height: 150px;
  background: #ff0000;
  position: absolute;
}
</style>
<script>
var my_div;
topIgnore = 100;  // (in pixel units) used for function ignoreTop

window.onload = function() {
  my_div = document.getElementById('my_div');
  var my_div_style = window.getComputedStyle(my_div);
  var width_div = parseInt(my_div_style.width, 10);  // remove 'px' from string
  var height_div = parseInt(my_div_style.height, 10);
  // make sure the property exists, else you can get a NaN
  my_div.style.left = 0;
  my_div.style.top = 0;
  // event
  window.onmousemove = function(e) {
    // my_div.innerHTML = e.pageX +' - '+ (leftBorder + width_div) +' - '+ width_div;
    cursorIsInsideDiv(e);
  }
  // TO DO: feel free to make similar functions for left/right/bottom
  // removes the first 100px
  function ignoreTop(top) {
    if(top < topIgnore) {
      return topIgnore;
    }
    return top;
  }
  function cursorIsInsideDiv(e) {
    var leftBorder = parseInt(my_div.style.left, 10); // remove 'px' from string
    var topBorder  = parseInt(my_div.style.top, 10);  
    // move left 
    if( e.pageX <  leftBorder ) {
      my_div.style.left = e.pageX + 'px';
    }
    // move right
    else if( e.pageX >  (leftBorder + width_div)) {
      my_div.style.left = (e.pageX - width_div ) + 'px';
    }
    // move up 
    if( e.pageY <  topBorder ) {
      var top = e.pageY ;
      top = ignoreTop(top);
      my_div.style.top = top + 'px';
    }
    // move down
    else if( e.pageY >  (topBorder + height_div)) {
      my_div.style.top = (e.pageY - height_div ) + 'px';
    }
  }
}
</script>
</head>
<body>
<div id="my_div">
  <h2>Newsletter</h2>
  Name: <input type="text" name="fullname"><br>
  Email: <input type="text" name="email"><br>
</div>
</body>

原帖：

<head>
  <style>
    #my_div {
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
    }
    #my_div {
      width: 100px;
      height: 100px;
      background: #ff0000;
      position: absolute;
    }
  </style>
  <script>
    var my_div;
    window.onload = function() {
      my_div = document.getElementById('my_div');
      my_div_style = window.getComputedStyle(my_div);
      var width_div = parseInt(my_div_style.width, 10);  // remove 'px' from string
      var height_div = parseInt(my_div_style.height, 10);
      // event
      window.onmousemove = function(e) {
        my_div.innerHTML = e.pageX + ',' + e.pageY + '<br/>' + width_div + ',' + height_div;
        my_div.style.left = e.pageX - Math.floor(width_div/2);
        my_div.style.top  = e.pageY - Math.floor(height_div/2);
      }
    }
  </script>
</head>
<body>
  <div id="my_div"></div>
</body>

效果很好，非常酷的效果。

当然，您不需要my_div.innerHTML行。

您需要的任何更具体的功能（对您的问题进行了编辑，也许我错过了一些内容）？

是否可以在Mousetracker中输入？

1 个答案: