Question

我希望将鼠标坐标转换为div的更改背景颜色中的数字到rgb（event.clientx，eventclientY，50）。有什么想法吗？

  <body>

  <p>
  <span>Move the mouse over the div.</span>
  <span>&nbsp;</span>
   </p>
  <div></div>

   <script>
   $( "div" ).mousemove(function( event ) {
      var $corX = $("(event.pageX)/10");
      var $corY = $("(event.pageY)");
      var $coloChange = $("rgb(" + $corx+ ", " + $corY + ",40)");
      $("div").css"("background", "$colorChange");
    });
</script>

Answer 1

首先，您将数学计算放入字符串中，并将这些字符串放入jQuery对象中。你只需要直接执行它们。 rgb()字符串的连接也是如此。您的变量名称中也存在不匹配的案例。解决这些问题后，您的代码应该可以正常运行：

$("div").mousemove(function(e) {
    var corX = e.pageX / 10;
    var corY = e.pageY;
    $("div").css("background-color", "rgb(" + corX + ", " + corY + ",40)");
});

div {
    width: 200px;
    height: 200px;
    border: 2px solid #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
    <span>Move the mouse over the div.</span>
    <span>&nbsp;</span>
</p>
<div></div>

Answer 2

这很简单，你的代码几乎是正确的。 jquery上的'变量'不一定需要$，你可以看到更多细节here）。 :)你可以看到here如何使用.pageX和.pageY，这也很简单。

这是你的代码，只是有点不同，现在正在工作。

https://fiddle.jshell.net/on27dn0c/

P.S。您可以在CSS上使用转换以获得更好的效果。

我希望它可以帮到你。

如何使用mousemove更改div的背景颜色？

2 个答案: