如何根据光标位置旋转图像并让它工作？

Question

我已经四处寻找与此类似的问题，但除了 this.

之外没有真正找到任何其他问题

我试过使用上面的代码，但我自己失败了。

这是一个工作片段

var img = $('.image');
if (img.length > 0) {
  var offset = img.offset();

  function mouse(evt) {
    var center_x = (offset.left) + (img.width() / 2);
    var center_y = (offset.top) + (img.height() / 2);
    var mouse_x = evt.pageX;
    var mouse_y = evt.pageY;
    var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
    var degree = (radians * (180 / Math.PI) * -1) + 90;
    img.css('-moz-transform', 'rotate(' + degree + 'deg)');
    img.css('-webkit-transform', 'rotate(' + degree + 'deg)');
    img.css('-o-transform', 'rotate(' + degree + 'deg)');
    img.css('-ms-transform', 'rotate(' + degree + 'deg)');
  }
  $(document).mousemove(mouse);
}

//Code is directly from

#header {
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  font-weight: lighter;
  text-shadow: 0 0 3px #777;
  margin-top: 75px;
  text-align: center;
  min-width: 800px;
}
#main-circle {
  text-align: center;
  min-width: 800px;
  z-index: 2;
}
#needle {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 1;
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  font-weight: lighter;
  text-shadow: 0 0 3px #777;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<head>
  <h1 id="header">It works here, but not on my page!</h1>
</head>

<body>
  <div id="main-circle">
    <img src="@Resources/@img/UnitCircle.png">
  </div>
  <div id="needle">
    <img class="image" src="@Resources/@img/Needle.png">
    <p>These are direct links to the images on my PC, but they'll do for now...</p>
    <p>I'm using Dreamweaver CS6, and I have my code written as shown, and using jQuery.min 1.11.1</p>
  </div>
</body>

这在代码段中完美！完全没有问题！

但是

第二次我将这段代码放入 Dreamweaver 中，那是什么都不起作用的时候。我知道 jQuery 是运行ning 我的代码版本（我做了一个测试，看看 jQuery 是否会改变一些文本，它做到了）。我还从上面获取了 jQuery 代码并尝试将其放入 HTML 代码中，但仍然没有用：/

jQuery只是不想运行这个吗？ HTML 遇到这个问题了吗？代码是否讨厌我？

提前致谢！

– Emir Čurtović

Answer 1

您正在寻找具有 jquery .image class 个对象，但找到了 none，因为页面的 HTML 正文没有机会在您的脚本运行之前加载。因此，您的 if(img.length > 0) 条件永远不会为真，因为 jquery 正在搜索尚不存在的对象。将您的脚本移动到结束 </body> 标记之前，它将在页面的 HTML 加载后运行。进行此调整后，您将获得旋转图像。

如何根据光标位置旋转图像并让它工作？

How do I rotate an image based on my cursor position, and have it work?

html

css

jquery

dreamweaver

这是一个工作片段