gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 16:39:13 26 4
gpt4 key购买 nike

我四处寻找与此类似的问题,但除了 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
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com