个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我四处寻找与此类似的问题，但除了 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>这在代码段中完美有效!完全没有问题!
但是
第二次我将这段代码放入 Dreamweaver 中，那时什么都不起作用。我知道 jQuery 正在在我的代码版本上运行(我做了一个测试，看看 jQuery 是否会更改某些文本，它确实会更改)。我还从上面获取了 jQuery 代码并尝试将其放入 HTML 代码中，但仍然没有用:/
jQuery 只是不想运行它吗？ HTML 在这方面有问题吗？代码是否讨厌我？
提前致谢!
– Emir Čurtović
最佳答案
您正在寻找.image带有 jquery 的类对象，但没有找到，因为页面的 HTML 正文在脚本运行之前没有机会加载。结果，你的 if(img.length > 0)条件永远不会为真，因为 jquery 正在搜索尚不存在的对象。将您的脚本移动到收盘前 </body>标记，它将在加载页面的 HTML 后运行。进行此调整后，您将获得旋转图像。
关于jquery - 如何根据光标位置旋转图像并让它工作？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33972643/
26
4
0
我有一个包含透明区域的 png，并将其设置为图像标签。 当光标位于图像的不透明部分上时，如何将光标设置为手？ 谢谢 最佳答案 为此，您需要查看位图本身。 WPF 的 HitTest 机制认为任何使用“
我想隐藏圆形仪表的手(那就是中间的东西，对吧？)。到目前为止，我尝试过: myCircularGauge.getHand().setVisible(false); 但是，绘制图表时这似乎会产生崩溃。如
我有两张图片:一张是张开的手，一张是抓着的手。我希望一个简单的“onmousedown”和“onmouseup”函数有助于制作出著名的抓手，您可以在类似谷歌地图的东西中看到它。但...抱歉，从头开始:
是否可以在sequelize迁移中使用光标？我正在尝试创建 DML 脚本，其想法是循环表中的值，即。使用游标输入日期，然后将值插入到其他表中，即。光标内的膳食日。 table : day dayId
我正在尝试使用格式加载值 +02:00 - mysql> select SUBSTR('2016-01-12T14:29:31.000+02:00',24,6); +02:00
我一直在尝试构建一个基于网络的文本编辑器。作为该过程的一部分，我正在尝试动态创建和修改基于元素的事件和用于字体编辑的击键事件。在这个特别的jsfiddle示例 我试图在按下 CTRL+b 并将焦点/插
我同时使用了 supertab 和 snipmate 插件。假设我正在使用 snipmate 创建一个 if 语句结构。在 if 语句中完成添加语句后，如何快速将光标移动到 if 语句之后。例如: i
我正在为我的 BlackBerry 项目创建一个搜索框，但看起来 BlackBerry 没有用于创建单行 EditField 的 API。我通过扩展 BasicEditField 和覆盖布局和绘制等方
我想知道如何获得 not-allowed光标在我禁用的链接上。我试图将它添加到禁用事件中，但它在那里不起作用，然后我尝试使用相同的光标事件引入悬停效果。关于如何让它发挥作用的任何想法？我在这里包含了我
在 Delphi 6 中，我可以使用 Screen.Cursor 更改所有表单的鼠标光标: procedure TForm1.Button1Click(Sender: TObject); begin
这个 Meteor 服务器代码需要每 n 秒从集合中打印一次文档，我该如何让它工作？谢谢 myCol.find({abc: undefined}).forEach( fun
在这个论坛上花了相当长的时间寻找与我的问题类似的答案，但找不到符合我的情况的答案。 我有一个 HTML 表单，通过 javascript 将其提交到我的 aspx 页面。 function Submi
是否可以在网页上创建透明的 HTML 光标？我使用 div 作为光标，我想让 div 50% 透明: http://jsfiddle.net/mCgmP/16/ I want this cursor
我正在使用 Cursor 来获取存储在我的 SQLite 数据库中的一些数据。当我的光标有数据库中的一些数据时，代码可以正常工作。但是，当 Cursor 不包含任何数据时，我在 Cursor.move
我希望隐藏特定范围的 x 和 y 位置中的光标。这是一些示例代码，代表了我想要做的事情。 if(x >= xLowerBound && x = yLowerBound + 20 && y = xLow
我有一个 .jsp 页面，用户可以在其中输入信息，然后使用保存按钮保存。该应用程序可以运行，但由于按钮的单击事件正在运行 Java 代码，然后将保存的信息添加到 Oracle 数据库，因此需要一些时间
为什么 Android 中 Cursor 没有 moveBeforeFirst()？ 其他风格的 Java 中也有类似的方法，如果您需要重新迭代结果集(例如，在 while(cursor.moveTo
我想使用 Tkinter 捕获相对鼠标运动。我附上一个监听器并且能够获取鼠标移动。但是，我希望能够“捕获”/“锁定”光标，使其不可见并且无法离开窗口(就像游戏一样)。我的目标是获得相对鼠标移动而不受窗
当应用程序同步时，我尝试更新数据库中每一行的“html”列。我用过这个教程Here将应用程序添加到“配置文件”列表中。这是我在 SyncAdapter 中使用的代码: private static v
我正在使用 Uploadify带有图像按钮。一切正常。除了，我需要在鼠标悬停时使用 cursor:crosshair; 而不是 cursor:default;。 我试着在 CSS 中这样设置它: ob
我是一名优秀的程序员,十分优秀！