Javascript 如何使图像在单击光标后停止/启动
我对jquery还是很陌生,不知道是否有人能帮我解决这个问题。我有一个小脚本,可以检测光标的位置,并有一个图像跟随它。如果单击鼠标按钮,我无法确定如何使图像停止/开始跟踪。谁能帮我指一下写作方向吗Javascript 如何使图像在单击光标后停止/启动,javascript,jquery,Javascript,Jquery,我对jquery还是很陌生,不知道是否有人能帮我解决这个问题。我有一个小脚本,可以检测光标的位置,并有一个图像跟随它。如果单击鼠标按钮,我无法确定如何使图像停止/开始跟踪。谁能帮我指一下写作方向吗 <!doctype html> <head> <title>Follow</title> <link href="stylesheets/standard.css" rel="stylesheet"> <script src="http
<!doctype html>
<head>
<title>Follow</title>
<link href="stylesheets/standard.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
$("html").mousemove(function (e) {
var xPos = e.pageX;
var yPos = e.pageY;
$("#foxlocation").html("The fox is at: " + xPos + ", " + yPos);
$("#imgFollow").offset({left:e.pageX,top:e.pageY});
});
});
</script>
</head>
<body>
<h1>Test</h1>
<h2 id="foxlocation"></h2>
<img id="imgFollow" width="75px" height="75px" src="images/fox.jpg"></img>
<footer>Test2</footer>
</body>
</html>
编辑:
在函数初始化后开始,最简单的方法是触发单击:
$(document).on('click', function () {
$(this)[init ? 'on' : 'off']('mousemove', follow);
init = !init;
}).trigger('click');
编辑:
在函数初始化后开始,最简单的方法是触发单击:
$(document).on('click', function () {
$(this)[init ? 'on' : 'off']('mousemove', follow);
init = !init;
}).trigger('click');
以下是一个例子:
在我的解决方案中,图像在页面加载后直接跟随鼠标,无需用户交互
我正在使用CSS属性
#imgFollow{
position:absolute;
}
你的代码除了.css而不是.offset
以下是一个例子:
在我的解决方案中,图像在页面加载后直接跟随鼠标,无需用户交互
我正在使用CSS属性
#imgFollow{
position:absolute;
}
你的代码除了.css而不是.offset
试试这个
$(document).ready(function() {
$("html").mousemove(function (e) {
follow(e);
})
.click( function () {
var foo = $.data( this, 'events' ).mousemove;
if(typeof foo = 'function') {
$(this).off('mousemove');
} else {
$(this).mousemove( function (e) {
follow(e);
});
}
});
});
function follow(e){
var xPos = e.pageX;
var yPos = e.pageY;
$("#foxlocation").html("The fox is at: " + xPos + ", " + yPos);
$("#imgFollow").offset({left:e.pageX,top:e.pageY});
}
试试这个
$(document).ready(function() {
$("html").mousemove(function (e) {
follow(e);
})
.click( function () {
var foo = $.data( this, 'events' ).mousemove;
if(typeof foo = 'function') {
$(this).off('mousemove');
} else {
$(this).mousemove( function (e) {
follow(e);
});
}
});
});
function follow(e){
var xPos = e.pageX;
var yPos = e.pageY;
$("#foxlocation").html("The fox is at: " + xPos + ", " + yPos);
$("#imgFollow").offset({left:e.pageX,top:e.pageY});
}
谢谢你的快速回复!它工作得很好,我应该想到这一点,但无论如何,它都可以加载页面上已经出现的图像,然后用户必须单击使其停止,然后再次单击使其启动,而不是他们必须加载,然后单击两次以开始后续?或者至少在开始处单击一次以使其开始,而不是两次?@Upstart-编辑了答案!谢谢你的快速回复!它工作得很好,我应该想到这一点,但无论如何,它都可以加载页面上已经出现的图像,然后用户必须单击使其停止,然后再次单击使其启动,而不是他们必须加载,然后单击两次以开始后续?或者至少在开始处单击一次以使其开始,而不是两次?@Upstart-编辑了答案!哦,糟糕,亚迪尼奥打败了我。哦,糟糕,亚迪尼奥打败了我。