这是一个有效的片段

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 https://stackoverflow.com/questions/9972449/rotating-an-element-based-on-cursor-position-in-a-separate-element

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

这在片段中有效完美！没问题！

BUT

第二个我把这个代码放到Dreamweaver中，那就是什么都没有用。我知道jQuery 在我的代码版本上运行的事实（我做了一个测试，看看jQuery是否会改变一些文本，而且确实如此）。我也从上面获取了jQuery代码并试图将它放在HTML代码中，但仍然无效：/

jQuery是不是想要运行它？ HTML有问题吗？这些代码是否讨厌我？

提前致谢！

- EmirČurtović

Answer 1

您正在使用jquery查找.image类对象但找不到任何对象，因为页面的HTML主体在脚本运行之前没有机会加载。因此，由于jquery正在搜索尚不存在的对象，因此if(img.length > 0)条件永远不会成立。将您的脚本移至结束</body>标记之前，它将在加载页面HTML后运行。进行此调整后，您将获得旋转图像。

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

这是一个有效的片段

1 个答案: