Jquery指向鼠标位置
我正在尝试制作一个根据鼠标位置移动的指针。
我正在使用 Jquery 并将弧度转换为度数，以及一个名为“旋转”的 jquery 插件。我设置了所有条件，但指针不会有连续的动画。
代码如下：
<html>
<head>
<title>Pagina test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="rotate.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<link rel='stylesheet' type='text/css' href='style.css' media='all' />
<script type="text/javascript">
$(document).ready(function(){
$(document).mousemove(function(e){
<!--$('#log2').html(e.pageX +', '+ e.pageY);-->
var radian = Math.atan2(e.pageY, e.pageX);
var grade = radian/(Math.PI/360);
$('#log2').html(grade);
$(document).mousemove(function(){
$('#img').animateMe({rotate: grade});
});
});
});
</script>
</head>
<body>
<div id="log"></div>
<div id="log1"></div>
<div id="log2"></div>
<div id="patrat">
<img src="arrow.png" alt="" width="300" height="300" border="0" id="img" title="" />
</div>
<script type="text/javascript">
var radian = $(document).bind('mousemove',function(e){
$("#log1").text(Math.atan2(e.pageY, e.pageX));
});
var grade = radian/(Math.PI/180);
</script>
<script type="text/javascript">
$(document).ready(function(){
$(document).bind('mousemove',function(e){
$("#log").text(e.pageX +', '+ e.pageY);
});
});
</script>
</body>
</html>
谢谢大家的帮助！
这是新代码
<html>
<head>
<title>Pagina test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/heygrady/transform/jquery.transform-0.9.3.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<link rel='stylesheet' type='text/css' href='style.css' media='all' />
<script type="text/javascript">
$(document).mousemove(function(e){
var radian = Math.atan2(e.pageY, e.pageX);
var grade = radian/(Math.PI/720);
$('#log2').html('grade:'+grade+' :: radian:'+radian);
$('#img').animate({rotate: grade});
});
</script>
</head>
<body>
<div id="log"></div>
<div id="log1"></div>
<div id="log2"></div>
<div id="patrat">
<img src="arrow.png" alt="" width="300" height="300" border="0" id="img" title="" />
</div>
</body>
</html>
I am trying to make a pointer that moves according to the position of your mouse.
I am using Jquery and transforming the radians to degrees, and a plugin for jquery that is called rotate.I set up all the conditions butt the pointer will not have a continuous animation.
Here`s the code:
<html>
<head>
<title>Pagina test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="rotate.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<link rel='stylesheet' type='text/css' href='style.css' media='all' />
<script type="text/javascript">
$(document).ready(function(){
$(document).mousemove(function(e){
<!--$('#log2').html(e.pageX +', '+ e.pageY);-->
var radian = Math.atan2(e.pageY, e.pageX);
var grade = radian/(Math.PI/360);
$('#log2').html(grade);
$(document).mousemove(function(){
$('#img').animateMe({rotate: grade});
});
});
});
</script>
</head>
<body>
<div id="log"></div>
<div id="log1"></div>
<div id="log2"></div>
<div id="patrat">
<img src="arrow.png" alt="" width="300" height="300" border="0" id="img" title="" />
</div>
<script type="text/javascript">
var radian = $(document).bind('mousemove',function(e){
$("#log1").text(Math.atan2(e.pageY, e.pageX));
});
var grade = radian/(Math.PI/180);
</script>
<script type="text/javascript">
$(document).ready(function(){
$(document).bind('mousemove',function(e){
$("#log").text(e.pageX +', '+ e.pageY);
});
});
</script>
</body>
</html>
Thx you all for your help!
This is the new code
<html>
<head>
<title>Pagina test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/heygrady/transform/jquery.transform-0.9.3.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<link rel='stylesheet' type='text/css' href='style.css' media='all' />
<script type="text/javascript">
$(document).mousemove(function(e){
var radian = Math.atan2(e.pageY, e.pageX);
var grade = radian/(Math.PI/720);
$('#log2').html('grade:'+grade+' :: radian:'+radian);
$('#img').animate({rotate: grade});
});
</script>
</head>
<body>
<div id="log"></div>
<div id="log1"></div>
<div id="log2"></div>
<div id="patrat">
<img src="arrow.png" alt="" width="300" height="300" border="0" id="img" title="" />
</div>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我想我发现了一个问题：
这是一个 HTML 注释标签，在 javascript 中它会破坏，所以使用 // 代替 - 即：
修复此问题后，您可能会发现您的脚本可以工作。
如果这没有帮助，请发布一个显示损坏行为的小提琴（http://jsfiddle.net）并对其具体行为进行评论。应该。
希望这有帮助
编辑：
无意冒犯，但你的代码非常可怕。
试试这个（精简并修复）：
仅举几例，“
animateMe”不是函数，“animate”才是。还有第二个$(document).mousemove(function(){..});行没有右括号 - 难怪这不起作用。并从页面中删除所有其他脚本标记，其中一些正在绑定您已经绑定它们的 mousemove 事件 - 要么删除它们，要么将它们滚动到一个处理程序中。
小提琴示例：
http://jsfiddle.net/uRpag/1/
第二次编辑：
您的插件的旋转方法需要在属性中包含“deg”。
试试这个代码：
而不是
上次编辑：
您需要做的最后一件事是当鼠标再次移动时
.stop()动画 - 否则当您进一步移动鼠标时，数百个动画函数将排队比几个像素。工作完成:)
http://jsfiddle.net/uRpag/4/
Think I've spotted a problem:
That's an HTML comment tag, inside javascript it will break so use // instead - i.e:
After fixing this you might find that your script works.
If this doesn't help, please post a fiddle (http://jsfiddle.net) showing broken behaviour and comment on exactly how it should behave.
Hope this helps
EDIT:
No offense but your code is pretty dire.
Try this (stripped down and fixed):
To name a few, '
animateMe' is not a function, 'animate' is. There was a second$(document).mousemove(function(){..});line in there that didn't have a close bracket - little wonder this didn't work.And remove all the other script tags from your page, a few of them are binding mousemove events where you have already bound them - either remove them or roll them into the one handler.
Example fiddle:
http://jsfiddle.net/uRpag/1/
2nd Edit:
Your plugin's rotate method needs to have 'deg' in the property.
Try this code:
Instead of
Last edit:
One last thing you needed to do was
.stop()the animation when the mouse moved again - otherwise hundreds of animate functions would queue up when you move the mouse more than a couple of pixels.Job done :)
http://jsfiddle.net/uRpag/4/